Natives Javascript implementiert Tab-Wechselfunktion_Javascript-Fähigkeiten-js-Tutorial-php.cn

Natives Javascript implementiert Tab-Wechselfunktion_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:21:04

Original

1167 Leute haben es durchsucht

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:

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

复制代码代码如下:

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选项卡切换插件了。