当前位置：Gxlcms > JavaScript > 原生javascript实现Tab选项卡切换功能_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：13人阅读

分析个人用原生JS获取类名元素的代码：

代码如下:

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,'');

调用例子：

代码如下:





Document




使用阅读 ：

　　 {'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'

    });



  • btn-A

  • btn-B


con-A


con-B


tabB


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

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

    'cur':'tab-cur02',

    'type':'mouseover'

    });



  • btn-A

  • btn-B

  • btn-C


con-A


con-B


con-C