Les exemples de cet article partagent avec vous le code d'implémentation spécifique pour l'effet de commutation de l'onglet JS pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html> <éadf> <meta charset = "gb2312" /> <tight> zhu zhu maked </ title> <script src = "js / jQuery.js" type = "text / javascript"> </cript> <style> * {margin: 0; rembourrage: 0; } body {background-Color: #fff; Font-Family: "Microsoft Yahei"; taille de police: 18px; Largeur: 1000px; marge: 50px automatique; Couleur: # 000000; } .wrapper {width: 350px; } #nav ul {Border-Bottom: 2px Solid YellowGreen; hauteur: 32px; } #nav li {display: en ligne de bloc; Border: 2px solide # 999; Border-Bottom: Aucun; marge-gauche: 10px; Largeur: 65px; Texte-aligne: Centre; hauteur de ligne: 30px; } #nav li: hover {cursor: pointeur; } #Content {affichage: bloc; Border: 1px bleu massif; Border-top: Aucun; Texte-aligne: Centre; hauteur: 100px; hauteur de ligne: 100px; } #nav li.on {border-bottom: solide 2px #ffffff; } .hide {affichage: aucun; } .show {affichage: bloc; } </ style> </ head> <script type = "text / javascript"> /*window.onload=change; // la fonction d'implémentation de code js change () {this.nav = document.getElementById ("nav"); this.li = nav.getElementsByTagName ("li"); this.cont = document.getElementById ("Content"); this.divi = cont.getElementsByTagName ("div"); for (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'). chaque (fonction () {$ (this) .click (function () {$ ('# nav li'). reposerlass ("on"); $ (this) .addclass ("on"); $ ("# contenu div"). div "). eq ($ (this) .index ()). addClass (" show "). sibllings (). addClass (" hide ");})})}) </cript> </ body> <div> <div id =" nav "> <ul> <li> num1 </li> <li> num2 </li> <li> num3 </li> <li> id = "Content"> <div> Content1 </div> <div> Content2 </div> <div> Content3 </div> <v> Content4 </div> </div> </div> </div> </ body> </html>Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.