Contoh -contoh dalam artikel ini berbagi dengan Anda kode implementasi spesifik untuk efek switching tab JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<!!! Padding: 0; } body {background-color: #fff; Font-Family: "Microsoft Yahei"; font-size: 18px; Lebar: 1000px; Margin: 50px Auto; Warna:#000000; } .wrapper {width: 350px; } #nav ul {border-bottom: 2px solid yellowgreen; Tinggi: 32px; } #nav li {display: inline-block; Perbatasan: 2px Solid #999; Border-Bottom: tidak ada; margin-kiri: 10px; Lebar: 65px; Teks-Align: tengah; Line-Height: 30px; } #nav li: hover {kursor: pointer; } #content {display: block; Perbatasan: 1px Solid Blue; Border-Top: Tidak ada; Teks-Align: tengah; Tinggi: 100px; Line-Height: 100px; } #nav li.on {border-bottom: solid 2px #ffffff; } .hide {display: none; } .show {display: block; } </tyle> </head> <script type = "text/javascript"> /*window.onload=change; // JS Code Implementasi Fungsi Perubahan () {this.nav = document.getElementById ("nav"); this.li = nav.getElementsbyTagname ("li"); this.cont = document.getElementById ("konten"); this.divi = cont.getElementsbyTagname ("Div"); untuk (var i = 0; i <li.length; i ++) {li [i] .index = i; Li [i] .onClick = function () {for (var i = 0; i <li.length; i ++) {li [i] .className = ""; Divi [i] .className = "hide"; } li [this.index] .className = "on"; Divi [this.index] .className = "show"; }}}*/$ (function () {$ ('#nav li'). masing -masing (fungsi () {$ (this) .click (function () {$ ('#nav li'). RemoveClass ("on"); $ (this) .addclass ("on"); $ ("#content dive"). div").eq($(this).index()).addClass("show").siblings().addClass("hide");})})})</script><body> <div> <div id="nav"> <ul> <li>num1</li> <li>num2</li> <li>num3</li> <li>num4</li> </div><div ID = "Content"> <div> content1 </div> <verv> Content2 </div> <ver> Content3 </div> <ver> Content4 </div> </div> </div> </div> </body> </html>Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.