Apabila menulis tab hari ini, anda perlu menggunakan .each() dalam jquery Dapatkan nombor elemen li dengan mendapatkan parameter indeks dalam setiap() untuk memudahkan paparan blok berikut halaman Ok kod berikut: Salin kod Kod adalah seperti berikut: tab <br> ul,li{list-style: none;margin: 0px padding: 0px;}<br> li{float: left;width: 80px; height: 30px; background-color: #ccc; 2px solid #fff;text-align:center; #content{clear:left; width:336px; tinggi: 180px; color:white; #content div{display: none}<br> #content .consh{display: block;}<br> #title .titsh{warna latar: #999;sempadan:2px pepejal #999; warna:#fff}<br> <br> $(function(){<br> $("li").setiap(fungsi(indeks){<br> $(this).mouseover(function(){<br> $("#title .titsh").removeClass("titsh");<br> $("#content .consh").removeClass("consh");<br> $(this).addClass("titsh");<br> $("#content>div:eq(" index ")").addClass("consh");<br> })<br> })<br> </skrip><br> </head><br> <badan><br> <div id="tab"><br> <div id="title"><br> … 🎜> <li>Pilihan 2</li><br> <li>Pilihan 3</li><br> <li>Pilihan 4</li><br> ... <div id="content"><br> <div class="consh">Kandungan 1</div><br> & Lt; Div </div><br> </div><br> </body><br> </html><br> <br> <p>Keputusan ujian adalah normal Kemudian, apabila saya menggunakannya pada halaman sebenar, saya mendapati bahawa apabila senarai li di atas ditukar, blok div di bawah tidak berubah dengan blok yang berbeza gunakan. Gaya lain dalam halaman bercanggah Selepas menukar semua pemilih css kepada yang unik, saya mendapati bahawa masalah itu masih wujud, jadi saya menilai bahawa ia sepatutnya berada di sini: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="24225" class="copybut" id="copybut24225" onclick="doCopy('code24225')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code24225"> <br> $("#title .titsh").removeClass("titsh");<br> $("#content .consh").removeClass("consh");<br> $(this).addClass("titsh");<br> $("#content>div:eq(" index ")").addClass("consh");<br> </div> <p>Tiada masalah apabila mengeluarkan gaya dalam ayat pertama dan kedua Dalam ayat ketiga, adalah perkara biasa untuk menambah gaya css titsh pada tag li semasa diperoleh melalui div: eq (indeks) Gagal apabila menambah gaya pada blok. </p> <p>Jadi inilah saya: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="2199" class="copybut" id="copybut2199" onclick="doCopy('code2199')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code2199"> <br> $("li").setiap(fungsi(indeks){<br> $(this).mouseover(function(){<br> </div> <p>Saya menambah tetingkap timbul amaran (indeks) di antara kedua-dua ayat ini, saya mendapati bahawa nilai indeks lebih daripada 10 tag li telah dimaklumkan sebenarnya adalah teg li lain pada halaman ini Oleh itu, nilai indeks yang diulang oleh setiap() tidak sepadan dengan nilai indeks blok div di bawah Dengan cara ini, apabila teg li di atas berubah, blok div di bawah tidak berubah Oleh itu, saya menukar kod js: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="41720" class="copybut" id="copybut41720" onclick="doCopy('code41720')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code41720"> <br> <script type="text/javascript"><br> $(fungsi(){<br> $("#title ul li").setiap(fungsi(indeks){<br> $(ini).klik(fungsi(){<br> $("#title .titsh").removeClass("titsh");<br> $("#content .consh").removeClass("consh");<br> $(ini).addClass("titsh");<br> $("#content > div:eq(" index ")").addClass("consh");<br> })<br> })<br> </skrip><br> <br> </div> Menambahkan sekatan pada pemilih elemen li yang perlu diulang dengan .each(), supaya ia hanya boleh mencari teg li dalam tab saya untuk setiap mendapatkan nilai indeks Masalahnya diselesaikan dan saya boleh pergi tidur! <p></p> </div>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
