原生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>