ネイティブJavaScriptでタブ切り替え機能を実装_JavaScriptスキル

ネイティブ JS を使用してクラス名要素を取得するための個人コードの分析:

コードをコピーします コードは次のとおりです:

getByClassName:function(クラス名,親){
var elem = [],
ノード = 親 != 未定義&&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 要素の親であるかどうかを判断する必要があります。 != unknown&&parent.nodeType==1、nodeType == 1 は、ノードが dom 要素であるかどうかを判断できます。 Firefox ブラウザでは、空白もノード (.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,'');

呼び出し例:

コードをコピー コードは次のとおりです:

   
   
   


   

        使用阅读 ：

        　　  {'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

   

   
    <スクリプトタイプ="text/javascript">
    //
    new LGY_tab({'tabBtn':'#tabA .tab-i',
                 'tabCon':'#tabA .tab-c',
                 'cur':'tab-cur'
    });
    //
    new LGY_tab({'tabBtn':'#tabB .tab-i',
                 'tabCon':'#tabB .tab-k',
                 'cur':'tab-cur02',
                 'type':'mouseover'
    });
    //テスト
    //
    new LGY_tab({'tabBtn':'#tabB .tab-j',
                 'tabCon':'#tabB .tab-k',
                 'cur':'tab-cur02',
                 'type':'mouseover'
    });
   

JS详细代码：

复制代码代码如下:

関数LGY_tab(オプション){
    this.oTab_btn = this.getDom(option.tabBtn);//切换点击的元素
    this.oTab_clist = this.getDom(option.tabCon); //切替え内容
    if(!this.oTab_btn || !this.oTab_clist) return;
    this.sCur = オプション.cur; // 活発な状態
    this.type = オプション.タイプ || 'クリック';
    this.nLen = this.oTab_btn.length;
    this.int();
}
LGY_tab.prototype = {
    getId:function(id){
        return document.getElementById(id);
    }、
    getByClassName:function(クラス名,親){
        var elem = [],
            ノード = 親 != 未定義&&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]);
            }
        }
        要素を返します;
    }、
    getDom:関数{
        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;
        c を返します;
    }、
    変更:関数(){
        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 = 'ブロック';
        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 = 'ブロック';
            }
        }
    }
}

最终效果图展示：

結果は、非常に優れたものではなく、互換性も問題なく、コードも非常に厳密で、完全に大規模な jQuery 選択スイッチング アプリケーションを置き換えることができます。