Javascript asli melaksanakan kemahiran fungsi_javascript penukaran Tab

Analisis kod peribadi untuk mendapatkan elemen nama kelas menggunakan JS asli:

Salin kod Kod adalah seperti berikut:

getByClassName:function(className,parent){
            var elem = [],
Nod = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
                   p = RegExp("(^|\s)" className "(\s|$)");
for(var n=0,i=node.length;n If(p.test(nod[n].className)){
                        elem.push(nod[n]);
                }
            }
              elem kembali;
}

Parameter induk adalah pilihan, tetapi anda perlu terlebih dahulu menentukan sama ada ia wujud dan merupakan induk elemen dom nod != undefined&&parent.nodeType==1, nodeType == 1 boleh menentukan sama ada nod ialah elemen dom, dalam Pelayar Firefox , ruang kosong juga dianggap nod (.childnodes Gunakan atribut ini untuk menentukan sama ada ia adalah elemen dom dan mengecualikan aksara ruang putih

Alih keluar nama kelas elemen:

Salin kod Kod adalah seperti berikut:

var cur = new RegExp(this.sCur,'g'); //this.sCur ialah nama kelas, di sini ia disimpan dengan pembolehubah Contohnya: this.sCur = "cur";
This.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');

Contoh panggilan:

Salin kod Kod adalah seperti berikut:

   
   
   


   

        使用阅读 ：

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