Artikel ini telah berbagi dengan Anda kode untuk mengimplementasikan efek pengalihan tab tab di JS asli untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. HTML bagian
<body> <v ID = "tab"> <div> <ul> <li> <a href = "#"> Urusan saat ini </a> </li> <li> <a href = "#"> Sports </a> </li> <li> <a div> </vairs </a> </a> </li> </Ul> </Div> Div> </a> </a> </li> </Ul> </Div> <div> Entertainment </div> </div> </body>
2.CSS Bagian: Ada banyak cara untuk mengimplementasikan bagian gaya. Ini adalah demo sederhana yang saya tulis, CSS saya yang terburuk. <...
.tab_menu .Selected {latar belakang-warna: #aaa;} .tab_menu ul {tinggi: 30px;} .tab_menu ul li {float: kiri; daftar-gaya: tidak ada; lebar: 50px; tinggi: 30px; warna:#000; perbatasan: solid 1px Gray; Border-Bottom: Tidak Ada; Text-Align: Center; Line-Height: 30px; margin-right: 3px;} .tab_menu ul li a {text-decoration: none;} .tab_box {width: 170px; tinggi: 150px; border: solid 1px grey; {width: 170px; tinggi: 150px; border: solid 1px grey;} .tab_box.3. Bagian JS penting:
window.onload = function () {var otab = document.geteLementById ('tab'); var ali = otab.getElementsbyTagname ('li'); var otabbox = otab.getElementsByTagname ('div') [1]; var abox = otabbox.getElementsbyTagname ('div'); untuk (var i = 0; i <ali.length; i ++) {ali [i] .index = i; Ali [i] .onClick = function () {for (var j = 0; j <ali.length; j ++) {ali [j] .className = ''; // Batal menu gaya abox [j] .className = 'hide'; // hide all tabDivs} Ali [this.index] .className = ' abox [this.index] .className = ''; }}}Ini sederhana dan kasar, dan tidak mempertimbangkan apakah Tabmenu dan Tabbox memiliki banyak gaya, dan tidak beradaptasi dengan proyek hanyalah cara berpikir. Banyak tempat perlu ditingkatkan. Berikut ini adalah untuk mempertimbangkan situasi di mana banyak kelas ditandai, tetapi umumnya ada beberapa kelas. Sekarang kita perlu menggunakan keterampilan untuk menghapus kelas tertentu dan menambahkan kelas.
3.1 Tambahkan dan hapus kelas di JS asli.
window.onload = function () {var otab = document.geteLementById ('tab'); var ali = otab.getElementsbyTagname ('li'); var otabbox = otab.getElementsByTagname ('div') [1]; var abox = otabbox.getElementsbyTagname ('div'); untuk (var i = 0; i <ali.length; i ++) {ali [i] .index = i; Ali [i] .onClick = function () {for (var j = 0; j <ali.length; j ++) {var aclass = ali [j] .classname.split (''); // elemen.classname adalah string, potong menjadi array var aclass1 = abox [j] .classname adalah classname (classclass (') (abox [j] .classname. z = 0; z <aclass.length; z ++) {if (aclass [z] == 'dipilih') {aclass.splice (z, 1); // Gunakan metode splice array untuk menghapus kelas yang ditemukan}} untuk (var k = 0; k <aclass1.length; k ++) {if if (var k = 0; k <acclass1.lass; k ++) {api) {var k = 0; aclass1.splice (k, 1); }} ali [j] .className = aclass.join (''); // Semua menu menghapus gaya yang dipilih abox [j] .className+= 'hide'; // semua kotak menyembunyikan abox [this.index]. CurrentName = aclass1.join (''); // kotak saat ini. gaya} } } }Tes pribadi efektif, tetapi semuanya agak berantakan dalam satu metode. Selain itu, ketika ada banyak kelas, efisiensi juga merupakan masalah, tetapi seharusnya tidak ada banyak kelas == mengoptimalkannya di masa depan. Fungsi ini sangat mudah digunakan.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.