原生javascript实现Tab选项卡切换功能
分析个人用原生JS获取类名元素的代码：
getByClassName:function(className,parent){
varelem=[],
node=parent!=undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
p=newRegExp("(^|\\s)"+className+"(\\s|$)");
for(varn=0,i=node.length;n<i;n++){
if(p.test(node[n].className)){
elem.push(node[n]);
}
}
returnelem;
}
parent参数是可选的，但需要先判断它是否存在，且是节点dom元素parent!=undefined&&parent.nodeType==1，nodeType==1可以判断节点是否为dom元素，在火狐浏览器里面，空白也算是节点（.childnodes），用这个属性就判断是否为dom元素，排除空白符.
移除元素的类名：
varcur=newRegExp(this.sCur,'g'); //this.sCur就是类名，这里是用变量保存如：this.sCur="cur";
this.oTab_btn[n].className=this.oTab_btn[n].className.replace(cur,'');
调用例子：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
body,p,ul,li{padding:0;margin:0;}
ul{list-style:none;}
h3{padding:5px;background-color:#999;margin-bottom:10px;}
pre{border:1pxdotted#000;}
.explan{padding:10px;color:#333;line-height:1.6;}
.box{width:300px;height:100px;border:1pxsolid#ccc;}
.boxul{height:30px;line-height:30px;}
.boxulli{float:left;display:inline;width:150px;text-align:center;background-color:#eee;cursor:pointer;}
.box.tab-cur{background-color:#000;color:#fff;}
.boxp{display:none;padding:30px;}
/*tabB*/
#tabB{width:450px;}
.box.tab-cur02{background-color:#025023;}
</style>
</head>
<body>
<divclass="explan">
<strong>使用阅读：</strong><br>
{'tabBtn':'#tabA.tab-i','tabCon':'#tabA.tab-c','cur':'tab-cur'}【必选】<br>
（1）'tabBtn':'#tabA.tab-i','tabCon':'#tabA.tab-c'选择器：只支持#id.className，(ID+空格+类名)【必选】<br>
（2）'cur':'tab-cur'（默认）：为切换按钮当前状态（类名）【必选】<br>
（3）'type':'mouseover'||'clicl'默认是点击【可选】
</div>
<h3>tabA</h3>
<pre>newLGY_tab({'tabBtn':'#tabA.tab-i',
'tabCon':'#tabA.tab-c',
'cur':'tab-cur'
});
</pre>
<divclass="box"id="tabA">
<ul>
<liclass="tab-i">btn-A</li>
<liclass="tab-i">btn-B</li>
</ul>
<pclass="tab-c">con-A</p>
<pclass="tab-c">con-B</p>
</div>
<h3>tabB</h3> <pre>newLGY_tab({'tabBtn':'#tabB.tab-i', 'tabCon':'#tabB.tab-k', 'cur':'tab-cur02', 'type':'mouseover' }); </pre> <divclass="box"id="tabB"> <ul> <liclass="tab-i">btn-A</li> <liclass="tab-i">btn-B</li> <liclass="tab-i">btn-C</li> </ul> <pclass="tab-k">con-A</p> <pclass="tab-k">con-B</p> <pclass="tab-k">con-C</p> </div> <scripttype="text/javascript"src="下方的代码段.js"></script> <scripttype="text/javascript"> // newLGY_tab({'tabBtn':'#tabA.tab-i', 'tabCon':'#tabA.tab-c', 'cur':'tab-cur' }); // newLGY_tab({'tabBtn':'#tabB.tab-i', 'tabCon':'#tabB.tab-k', 'cur':'tab-cur02', 'type':'mouseover' }); //test // newLGY_tab({'tabBtn':'#tabB.tab-j', 'tabCon':'#tabB.tab-k', 'cur':'tab-cur02', 'type':'mouseover' }); </script> </body> </html>