原生JS 选项卡代码实现
可实现同页面多个选项卡
效果图:
代码实现:
HTML部分
<div class="main" id="tabs">
<div class="tabDiv">
<a href="javascript:;" class="on">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<div class="con">
1111111111111111111111111
</div>
<div class="con">
2222222222222222222222222
</div>
<div class="con">
3333333333333333333333333
</div>
</div> <div class="main" id="tabs1">
<div class="tabDiv">
<a href="javascript:;" class="on">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<div class="con">
1111111111111111111111111
</div>
<div class="con">
2222222222222222222222222
</div>
<div class="con">
3333333333333333333333333
</div>
</div>
JS部分
fnTab("tabs");
fnTab("tabs1"); function fnTab(id){
var parentEle = document.getElementById(id);
var tabTools = getByClass(parentEle,"tabDiv")[0].getElementsByTagName("a");
var conArr = getByClass(parentEle,"con");
conArr[0].className += " active";
for(var i=0;i<tabTools.length;i++){
(function(i){
tabTools[i].onclick = function(){
for(var j=0;j<conArr.length;j++){
removeClass(tabTools[j],"on");
removeClass(conArr[j],"active");
}
addClass(tabTools[i],"on");
addClass(conArr[i],"active");
}
})(i); } } function getByClass(oParentEle,sClass){
if(oParentEle.getElementsByClassName){
var oEles = oParentEle.getElementsByClassName(sClass);
return oEles;
}else{
var oEles = oParentEle.getElementsByTagName("*");
var aRes = [];
for(var i=0;i<oEles.length;i++){
if(oEles[i].className == sClass){
aRes.push(oEles[i]);
}
}
return aRes;
} }
function addClass(ele,className){
if(ele && ele.nodeType == 1){
var reg = new RegExp("\\b"+className +"\\b","g");
if(!reg.test(ele.className)){
ele.className += " "+className;
}
} }
function removeClass(ele,className){
if(ele && ele.nodeType == 1){
var reg = new RegExp("\\b"+className +"\\b","g");
if(reg.test(ele.className)){
ele.className = ele.className.replace(reg,"");
}
} }
原生JS 选项卡代码实现的更多相关文章
- 原生js一行代码实现简易轮播图
这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...
- 原生js扫雷代码
思路要点: 1. 随机地雷放到一个二维数组中: 2. 每一个格子要统计周围有几颗雷: 3. 每一个格子是否处于打开状态,用于判断是否赢得游戏: 4. 如果点击到周围没有雷的地方,把周围的打开: 具体的 ...
- 原生JS常用代码汇总
数组相关 var codes = new Array( ); //创建数组codes.length //数组长度 动态插入数组 codes.push(value);
- 原生js选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...
- 抛弃JQ,回归原生js……
之前我写过一篇文章叫做<jq不会被淘汰>--而事实上它真的不会被淘汰,因为即使在mvvm框架盛行的今天,原生js的api越来越友好的今天,jq依然在用户量上是霸主-- 但是今天我们要讨论的 ...
- 原生js瀑布流
HTML部分代码............................... CSS部分代码........................... 原生js部分代码................. ...
- jQuery和原生JS的对比
原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
随机推荐
- 「Poetize3」绿豆蛙的归宿
描述 Description 给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出发能够到达所有的点,所有的点也都能够到达终点.绿豆蛙从起点出发,走向终点.到达每一个顶点时,如果有K ...
- bzoj1208 [HNOI2004]宠物收养所(STL,Treap)
1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 5956 Solved: 2317[Submit][Sta ...
- 2012蓝桥杯本科组C/C++决赛题
星期几 [结果填空] (满分5分) 1949年的国庆节(10月1日)是星期六. 今年()的国庆节是星期一. 那么,从建国到现在,有几次国庆节正好是星期日呢? 只要答案,不限手段! 可以用windows ...
- [Locked] Flatten 2D Vector
Problem Description: Implement an iterator to flatten a 2d vector. For example,Given 2d vector = [ [ ...
- poj2318 水题(二分+叉积)
题目链接:http://poj.org/problem?id=2318 #include<cstdio> #include<cstring> #include<cmath ...
- 也谈BIO | NIO | AIO (Java版--转)
关于BIO | NIO | AIO的讨论一直存在,有时候也很容易让人混淆,就我的理解,给出一个解释: BIO | NIO | AIO,本身的描述都是在Java语言的基础上的.而描述IO,我们需要从两个 ...
- CentOS6.5 mini开启网络
1.编辑network配置 vim /etc/sysconfig/network-scripts/ifcfg-eth0 1 2 3 4 5 6 7 DEVICE=eth0 HWADDR=00:0C:2 ...
- Monad
Monad英文含义,单体.单分子.单细胞. Monad是一种设计模式,表示将一个运算过程,通过函数拆解成互相连接的多个步骤.你只要提供下一步运算所需的函数,整个运算就会自动进行下去.
- python中如何判断list中是否包含某个元素
在python中可以通过in和not in关键字来判读一个list中是否包含一个元素 pythontab = ['p','y','t','h','o','n','t','a','b'] if 't' ...
- poj 3171 Cleaning Shifts(区间的最小覆盖价值)
Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2743 Accepted: 955 De ...