Artikel ini menjelaskan metode implementasi tab JS. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
1. Ide
1. Dapatkan elemen;
2. Tambahkan acara OnClick atau OnMouseMove ke elemen tombol loop;
3. Saat mengklik tombol saat ini, itu akan ditampilkan dalam keadaan yang disorot. Melalui loop FOR, semua gaya tombol diatur untuk kosong. Atur tampilan semua divs menjadi tidak ada.
4. Klik tombol saat ini untuk menambahkan gaya, tampilkan div saat ini, dan atur tampilan untuk memblokir.
2. Kode HTML:
<div id="div1"> <input type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="4"/> <div style="display:block;">11</div> <div>22</div> <div>33</div> <div>44</div></div>
3. Bagian CSS:
.active {latar belakang:#9cc;}. Div2 {width: 300px; tinggi: 200px; BORDER: 1PX #66666 SOLID; Tampilan: Tidak Ada;}4. Kode JS:
<script> window.onload = function () {var odiv = document.geteLementById ('div1'); // dapatkan div var btn = odiv.getElementsbyTagname ('input'); // dapatkan input var div2 = odiv.geteLementsbyTagname ('div');//dapatkan div div untuk (i = 0; btn [i] .index = i // btn [i] adalah tombol i-th dari tombol yang ditentukan; Tambahkan atribut indeks ke tombol dan atur nilai indeks ke i btn [i] .Onclick = function () // acara klik i-th dari tombol {untuk (i = 0; i <btn.length; i ++) // loop hapus tombol dan sembunyikan div {btn [i] .classname = '// clear the clote the clote. Div} this.className = 'Active' // Tambahkan Div2 Active [this.index] .style.display = 'block' // this.index adalah div}}} saat ini </script>Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.