Javascript asli melaksanakan kemahiran fungsi_javascript penukaran Tab

WBOY
Lepaskan: 2016-05-16 16:21:04
asal
1178 orang telah melayarinya

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:




   
    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


   

   
   
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan