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

分析个人用原生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<i;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,'');        

调用例子:

复制代码 代码如下:


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="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: 1px dotted #000;}
    .explan {padding: 10px;color: #333;line-height: 1.6;}
    .box {width: 300px;height:100px;border: 1px solid #ccc;}
    .box ul{height: 30px;line-height: 30px;}
    .box ul li {float: left;display: inline;width: 150px;text-align: center;background-color: #eee;cursor: pointer;}
    .box .tab-cur {background-color: #000;color: #fff;}
    .box p {display: none;padding: 30px;}
    /*tabB*/
    #tabB {width: 450px;}
    .box .tab-cur02 {background-color: #025023;}
    </style>
</head>
<body>
    <div>
        <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>new LGY_tab({'tabBtn':'#tabA .tab-i',
    'tabCon':'#tabA .tab-c',
    'cur':'tab-cur'
    });
         </pre>
    <div>
        <ul>
            <li>btn-A</li>
            <li>btn-B</li>
        </ul>
        <p>con-A</p>
        <p>con-B</p>
    </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxzpp.html