Die Beispiele in diesem Artikel teilen Ihnen den spezifischen Implementierungscode für den Registerkarte "Registerkarte" für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <kopf> <meta charset = "gb2312"/> <title> zhu zhu gemacht </title> <script src = "js/jquery.js" type = "text/javascript"> </script> <Styles> *{margin: 0; Polsterung: 0; } Body {Hintergrundfarbe: #fff; Schriftfamilie: "Microsoft Yahei"; Schriftgröße: 18px; Breite: 1000px; Rand: 50px Auto; Farbe:#000000; } .wrapper {width: 350px; } #nav ul {Border-Bottom: 2PX Solid Yellowgreen; Höhe: 32px; } #nav li {display: Inline-Block; Grenze: 2PX Solid #999; Grenzboden: Keine; Rand-Links: 10px; Breite: 65px; Text-Align: Mitte; Zeilenhöhe: 30px; } #nav li: hover {cursor: pointer; } #Content {display: block; Grenze: 1px fest blau; Grenztop: Keine; Text-Align: Mitte; Höhe: 100px; Zeilenhöhe: 100px; } #nav li.on {Border-Bottom: Solid 2px #ffffff; } .hide {display: keine; } .show {display: block; } </style> </head> <skript type = "text/javaScript"> /* window.onload=change; // JS -Code -Implementierungsfunktion Änderung () {this.nav = document.getElementById ("nav"); this.li = nav.getElementsByTagName ("li"); this.cont = document.getElementById ("Inhalt"); this.divi = cont.getElementsByTagName ("div"); für (var i = 0; i <li.length; i ++) {li [i] .Index = i; li [i] .onclick = function () {für (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'). Jede (function () {$ (this) .click (function () {$ ('#nav li'). removeclass ("on"); div "). Eq ($ (this) .Index ()). id = "content"> <div> content1 </div> <div> content2 </div> <div> content3 </div> <div> content4 </div> </div> </div> </div> </body> </html>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.