Javascript natif implémente les compétences de fonction de commutation d'onglets

Javascript natif implémente les compétences de fonction de commutation d'onglets_javascript

WBOY

Libérer： 2016-05-16 16:21:04

original

1178 Les gens l'ont consulté

Analyse du code personnel pour obtenir des éléments de nom de classe en utilisant du JS natif :

Copier le code Le code est le suivant :

getByClassName:function(className,parent){
var elem = [],
Node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
                   p = new RegExp("(^|\s)" className "(\s|$)");
pour(var n=0,i=node.length;n Si(p.test(node[n].className)){
                        elem.push(node[n]);
                }
            }
              renvoyer l'élément ;
>

Le paramètre parent est facultatif, mais vous devez d'abord déterminer s'il existe et s'il s'agit d'un élément dom de nœud parent != undefined&&parent.nodeType==1, nodeType == 1 peut déterminer si le nœud est un élément dom, dans le Dans le navigateur Firefox, les espaces vides sont également considérés comme des nœuds (.childnodes). Utilisez cet attribut pour déterminer s'il s'agit d'un élément dom et excluez les caractères d'espacement

Supprimez le nom de classe de l'élément :

Copier le code Le code est le suivant :

var cur = new RegExp(this.sCur,'g'); //this.sCur est le nom de la classe, ici il est enregistré avec une variable. Par exemple : this.sCur = "cur";

This.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,''); 

Exemple d'appel :

Copier le code Le code est le suivant :

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

复制代码代码如下 :

fonction 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 || 'cliquez';
    this.nLen = this.oTab_btn.length;
    this.int();
>
LGY_tab.prototype = {
    getId:fonction(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|$)");
        pour(var n=0,i=node.length;n             if(p.test(node[n].className)){
                elem.push(noeud[n]);
            >
        >
        renvoyer l'élément ;
    },
    getDom :fonction(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) renvoie null;
        retourner c;
    },
    changement:fonction(){
        var cur = new RegExp(this.sCur,'g');
        pour(var n=0;n             this.oTab_clist[n].style.display = 'aucun';
            this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');
        >
    },
    int:fonction(){
        var ça = ceci;
        this.oTab_btn[0].className = ' ' this.sCur;
        this.oTab_clist[0].style.display = 'block';
        pour(var n=0;n             this.oTab_btn[n].index = n;
            this.oTab_btn[n]['on' this.type] = function(){
                ça.change();
                that.oTab_btn[this.index].className =' ' that.sCur;
                that.oTab_clist[this.index].style.display = 'block';
            >
        >
    >
>

最终效果图展示：

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