Os exemplos deste artigo compartilham com você o código de implementação específico para o efeito de comutação da guia JS para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html> <head> <meta charset = "gb2312"/> <title> zhu zhu feito </title> <script src = "js/jQuery.js" type = "text/javascript"> </script> <stystle> *{margin: 0; preenchimento: 0; } corpo {Background-Color: #FFF; Fonte-família: "Microsoft Yahei"; Size da fonte: 18px; Largura: 1000px; margem: 50px automático; Cor:#000000; } .Wrapper {Width: 350px; } #NAV UL {Border-Bottom: 2px Solid YellowGreen; Altura: 32px; } #Nav Li {Display: Inline-Block; fronteira: 2px Solid #999; Bottom de fronteira: Nenhum; margem-esquerda: 10px; Largura: 65px; Alinhamento de texto: centro; altura de linha: 30px; } #nav li: hover {cursor: pointer; } #Content {Display: Block; borda: 1px azul sólido; Top de fronteira: Nenhum; Alinhamento de texto: centro; Altura: 100px; altura da linha: 100px; } #nav li.on {Border-Bottom: Solid 2px #ffffff; } .Hide {display: Nenhum; } .show {display: block; } </style> </head> <script type = "text/javascript"> /*window.onload=change; // Função de implementação de código JS alteração () {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'). cada (function () {$ (this) .Click (function () {$ ('#Nav li'). RemoveClass ("em" em "); $ (this) .addclass (" em "); $ ("#content div "). Removeclass; div "). Eq ($ (this) .Index ()). addclass (" show "). irmãos (). addclass (" hide ");})})}) </script> <body> <div> <div id =" Nav "> <ul> <li> num1 </li> <li> <li> <li> <li> <li> <li> id = "content"> <div> content1 </div> <div> content2 </div> <div> content3 </div> <div> content4 </div> </div> </div> </div> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.