首页  >  文章  >  web前端  >  原生javascript实现Tab选项卡切换功能_javascript技巧

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

WBOY
WBOY原创
2016-05-16 16:21:041167浏览

分析个人用原生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',<br>
    'tabCon':'#tabA .tab-c',<br>
    'cur':'tab-cur'<br>
    });<br>
         

   

       

               
  • btn-A

  •            
  • btn-B

  •        

       

con-A


       

con-B


   

   

tabB


    
new LGY_tab({'tabBtn':'#tabB .tab-i',<br>
    'tabCon':'#tabB .tab-k',<br>
    'cur':'tab-cur02',<br>
    'type':'mouseover'<br>
    });<br>
         

   

       

               
  • btn-A

  •            
  • btn-B

  •            
  • btn-C

  •        

       

con-A


       

con-B


       

con-C


   

   
   


JS详细代码:

复制代码 代码如下:

function LGY_tab(option){
    this.oTab_btn = this.getDom(option.tabBtn);//切换点击的元素
    this.oTab_clist = this.getDom(option.tabCon); //切换的内容
    if(!this.oTab_btn || !this.oTab_clist) return;
    this.sCur = option.cur; //激活的状态
    this.type = option.type || 'click';
    this.nLen = this.oTab_btn.length;
    this.int();
}
LGY_tab.prototype = {
    getId:function(id){
        return document.getElementById(id);
    },
    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;
    },
    getDom:function(s){
        var nodeName = s.split(' '),
            p = this.getId(nodeName[0].slice(1)),
            c = this.getByClassName(nodeName[1].slice(1),p);
        if(!p || c.length==0) return null;
        return c;
    },
    change:function(){
        var cur = new RegExp(this.sCur,'g');
        for(var n=0;n             this.oTab_clist[n].style.display = 'none';
            this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');
        }
    },
    int:function(){
        var that = this;
        this.oTab_btn[0].className += ' '+this.sCur;
        this.oTab_clist[0].style.display = 'block';
        for(var n=0;n             this.oTab_btn[n].index = n;
            this.oTab_btn[n]['on'+this.type] = function(){
                that.change();
                that.oTab_btn[this.index].className +=' ' + that.sCur;
                that.oTab_clist[this.index].style.display = 'block';
            }
        }
    }
}

最终效果图展示:

效果是不是很棒呢,而且兼容性也不错,代码也很简洁,完全可以替代庞大的jQuery选项卡切换插件了。

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn