Analisis komprehensif dari metode switching halaman tab

Cara beralih tab adalah sebagai berikut:

1. Kontrol tampilan dan sembunyikan tab

2. Tab tidak beralih, data dimuat

Kontrol tampilan dan sembunyikan tab

Script front-end:

1. Implementasi JQuery:

 $ (function () {$ (". SDKJ-TABS li"). Klik (function () {$ (this) .addclass ("on"). Siblings (). RemoveClass ("on"); var index = $ (". li "). index (this); $ (". Cont-tabs> div "). eq (index) .show ().

Perkenalkan file jQuery, kode sederhana

File jQuery besar, browser tidak kompatibel

2. Implementasi JS

 Fungsi SelectTab (showContent, selfObj) {var tab = document.geteLementById ("sdkj-tabs"). GetElementsByTagname ("li"); var tablength = tab.length; for (i = 0; i <tablength; i ++) {tab [i] .classname = ";} f untuk; i ++) {i]. Classname ="; j = document.getElementById ("cont-tab"+i);

Tidak perlu memperkenalkan file jQuery

Volume kode besar, dan fungsi dan ID diperlukan untuk setiap tag

3. Implementasi plug-in

 var tabs=function(){function tag(name,elem){return (elem||document).getElementsByTagName(name);}//Get the element of the corresponding ID function id(name){return document.getElementById(name);}function first(elem){elem=elem.firstChild;return elem&&elem.nodeType==1? elem: next (elem);} function next (elem) {elem = elem.nextSibling; while (elem) {if (elem.nodetype == 1) {return elem;} else {elem = new array = array = 0; var_k; var_in; var_in; var_k; var_k; var_k; var_k; var_k; var_k; var_k; var_k; var_k; var_k; var_k; var_k; var_k; vari; elem_child=first(elem);for(array_int=0;elem_child;array_int++){//console.log("elem:"+elem);arrays[array_int]=elem_child;elem_child=next(elem_child);} return arrays;} return {set:function(elemId,tabId){var elem = tag ("li", id (elemid)); var tabs = child (id (tabid)); var listNum = elem.length; var tabnum = tabs.length; console.log (tab); untuk (var i = 0; i <listnum; i ++) {elem [i] .onClick = (function i) {for for (i) {i) {i) {e elem [i]. j = 0; j <3; j ++) {if (i == j) {tab [j] .style.display = "block"; elem [j] .classname = "on";} else {tab [j] .style.display = "none"; ebun [j] .classname = " ";}}}}}) (i)}}}} (); tabs.set (" sdkj-tabs "," cont-tabs "); // jalankan

Tidak perlu memperkenalkan file jQuery, cukup tambahkan ID elemen induk

Di atas adalah deskripsi lengkap dari analisis komprehensif dari metode switching halaman tab yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!