Natives Javascript implementiert Tab-Wechselfunktion_Javascript-Fähigkeiten

Analyse des persönlichen Codes zum Erhalten von Klassennamenelementen mit nativem JS:

Code kopieren Der Code lautet wie folgt:

getByClassName:function(className,parent){
            var elem = [],
Node = parent != undefiniert&&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;
}

Der übergeordnete Parameter ist optional, Sie müssen jedoch zunächst feststellen, ob er vorhanden ist und ein Knoten-Dom-Element ist. parent != undefiniert&&parent.nodeType==1, nodeType == 1 kann feststellen, ob der Knoten ein Dom-Element ist Im Firefox-Browser gelten auch Leerzeichen als Knoten (.childnodes), um festzustellen, ob es sich um ein Dom-Element handelt, und um Leerzeichen auszuschließen

Entfernen Sie den Klassennamen des Elements:

Code kopieren Der Code lautet wie folgt:

var cur = new RegExp(this.sCur,'g'); //this.sCur ist der Klassenname, hier wird er mit einer Variablen gespeichert. Zum Beispiel: this.sCur = "cur";
This.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');

Anrufbeispiel:

Code kopieren Der Code lautet wie folgt:

   
   
   


   

        使用阅读 ：

        　　  {'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详细代码：

复制代码 代码如下:

Funktion 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 || 'klick';
    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 != undefiniert&&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选项卡切换插件了。

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn