Los ejemplos en este artículo comparten con usted el código de implementación específico para el efecto de conmutación de la pestaña JS para su referencia. El contenido específico es el siguiente
<! Doctype html> <html> <head> <meta charset = "gb2312"/> <title> zhu zhu hecho </title> <script src = "js/jQuery.js" type = "text/javaScript"> </script> <style> *{margen: 0; relleno: 0; } Body {Background-Color: #fff; Font-Family: "Microsoft Yahei"; tamaño de fuente: 18px; Ancho: 1000px; Margen: 50px Auto; Color:#000000; } .wrapper {ancho: 350px; } #nav ul {Border-Bottom: 2px Solid YellowGreen; Altura: 32px; } #nav li {display: inline-block; Border: 2px Solid #999; Border-Bottom: Ninguno; margen-izquierda: 10px; Ancho: 65px; Text-Align: Center; Línea de altura: 30px; } #nav li: hover {cursor: pointer; } #content {display: block; borde: 1px azul sólido; Border-Top: Ninguno; Text-Align: Center; Altura: 100px; Línea de altura: 100px; } #nav li.on {border-bottom: solid 2px #ffffff; } .Hide {Display: None; } .show {display: block; } </style> </head> <script type = "text/javascript"> /*window.onload=change; // La función de implementación del código JS cambia () {this.nav = document.getElementById ("nav"); this.li = nav.getElementsBytagName ("li"); this.cont = document.getElementById ("contenido"); this.divi = cont.getElementsByTagName ("div"); para (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 = "escondite"; } li [this.index] .classname = "on"; divi [this.index] .classname = "show"; }}}*/$ (function () {$ ('#Nav Li'). Cada (function () {$ (this) .Click (function () {$ ('#Nav Li'). RemoveClass ("on"); $ (this) .addclass ("on"); $ ("#contenido div"). removeclass (); $ ($ ("contenido contenido 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"> <iv> Content1 </div> <iv> Content2 </div> <div> Content3 </div> <div> Content4 </div> </div> </div> </div> </body> </html>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.