原生javascript实现Tab选项卡切换功能_javascript技巧

代码如下:
getByClassName:function(className,parent){
var elem = [],
node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
p = new RegExp("(^|\\s)"+className+"(\\s|$)");
for(var n=0,i=node.length;n if(p.test(node[n].className)){
elem.push(node[n]);
}
}
return elem;
}

　　parent参数是可选的，但需要先判断它是否存在，且是节点dom元素 parent != undefined&&parent.nodeType==1 ，nodeType == 1可以判断节点是否为dom元素，在火狐浏览器里面，空白也算是节点（.childnodes），用这个属性就判断是否为dom元素，排除空白符.

移除元素的类名：

代码如下:
var cur = new RegExp(this.sCur,'g'); //this.sCur就是类名，这里是用变量保存 如：this.sCur = "cur";
this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');

调用例子：

代码如下:









使用阅读 ：

　　 {'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c','cur':'tab-cur'} 【必选】

　　（1）'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c'　　选择器：只支持 #id　.className，(ID + 空格 + 类名) 【必选】

　　（2）'cur':'tab-cur'（默认） ：为切换按钮当前状态（类名）【必选】

　　（3）'type':'mouseover'|| 'clicl' 默认是点击 【可选】

tabA

new LGY_tab({'tabBtn':'#tabA .tab-i',

 'tabCon':'#tabA .tab-c',

 'cur':'tab-cur'

 });

 

con-A

con-B

tabB

new LGY_tab({'tabBtn':'#tabB .tab-i',

 'tabCon':'#tabB .tab-k',

 'cur':'tab-cur02',

 'type':'mouseover'

 });

 

con-A

con-B

con-C