Rumah >hujung hadapan web >tutorial js >Javascript asli melaksanakan kemahiran fungsi_javascript penukaran Tab

Javascript asli melaksanakan kemahiran fungsi_javascript penukaran Tab

WBOYasal: 2016-05-16 16:21:041195semak imbas

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