Dieser Artikel hat Ihnen den spezifischen Code für JS mitgeteilt, um einen einfachen Registerkarten -Switching -Effekt für Ihre Referenz zu implementieren. Der spezifische Inhalt ist wie folgt
JS -Registerkarte Switching -Code:
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "generator" content = "editPlus®"> <meta name = "Autor" content = ""> <meta name = "keywords" content = "> <meta name =" content = "content =" type = "text/css" href = "base.css" media = "all"/> <style type = "text/css"> a {color: #a0b3d6;}. tabs {border: 1px solide #a0b3d6; Margin: 100px; width: 300px;}. Tabs-Nave-Nave-Nave-Nave-Nave-Nave-Nave-Nave-Nave-Nave A {Hintergrund: #EAF0FD; Zeilenhöhe: 30px; Padding: 0 20px; Anzeige: Inline-Block; Grenzrechte: 1PX Solid #a0b3d6; Border-Bottom: 1px Solid #a0b3d6; float: links; weiß; _position: relativ;}. tabs-content {padding: 20px; Border-top: 1px solid #a0b3d6; margin-top: -1px;} </style> </head> <body> <div id = "tabs"> <h2> <a href = "javascript:; href = "JavaScript:;"> Technologie </a> <a href = "JavaScript:;"> Leben </a> <a href = "JavaScript:;"> Werke </a> </h2> <p> <P> Technologie Technologie Technologie Technologie Technologie Technologie Technologie Technologie Technologie Technologie Technologie Technologie </p> <p> Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Leben Werke Werke Werke Werke </p> </div> <br/> <br/> <div id = "tabs2"> <h2> <a href = "javascript:;"> 11111 </a> <a href = "javaScript :;"> 22222 </a> <a href = "javaScript :;"> 33333 </a> </h2> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111</p><p>22222222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222222 22222222222222222222222222222222222222222222222222222222222222 type = "text/javaScript" src = "tabs.js"> </script> <script type = "text/javaScript"> Fenster.onload = function () {tabs ('tabs', 'klick') tabs ('tabs2', 'Mouseover');} </script> </body> </html>Tab.js
Funktionstabellen (ID, Trigger) {var tabsBtn = document.getElementById (id) .GetElementsByTagName ('H2') [0] .GetElementsByTagName ('a'); var tabscontent = document. i ++) {tabsBtn [i] .Index = i; if (Trigger == 'click') {tabsBtn [i] .onclick = function () {clearClass (); this.className = 'on'; showContent (this.index);}} else if (Trigger == 'mouseover') {tabsBtn [i] .onmouseover = function () {clearClass (); this.className = 'on'; showContent (this.index);}}} Funktion showContent (n) {for (var i = 0, len = tabsBtn.length; i <len; i ++) {tabScontent [i] .Classname = 'Hide'; ClearClass () {für (var i = 0, len = tabsBtn.length; i <len; i ++) {tabsBtn [i] .className = '';}}}Base.css
@charset "utf-8";/*@ name: base@ function: setze den browser-Standardstil zurück */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {Margin: 0; Polster: 0;}/* Beachten Sie, dass Formelemente nicht übergeordnete Schriftart*/Körper, Taste, Eingabe, Select, textarea {Schrift: 12px Simsun, Tahoma, Arial, Sans-Serif;} Eingabe, Select, Textarea {font-Größe: 100%;}/* Entfernen Sie die Marge der Triebwerte und die Ausgabe der Font-Größe*/* Entfernen Sie die Marge der Marke und die Misstrike ab. {Border-Collapse: Kollaps; Randabstand: 0;}/* IE-Fehler behoben: TH erben nicht text-align*/th {text-align: Erbe;}/* Entfernen Sie den Standardgrenze. Dieses Element*/abbr, Akronym {Border: Keine; Schriftart-Variante: Normal;}/*konsistenter del stil*/del {textdekoration: line-through;} adresse, caption, cit, code, dfn, em, th, var {Listenstil: None;}/* Align ist der wichtigste Faktor in der Schrift, zentrieren Sie nicht alles*/caption, th {text-align: links;}/* aus Yahoo, lassen Sie den Titel angepasst, passen Sie sich an mehrere Systemanwendungen an*/H1, H2, H3, H4, H6 {FONT-SIZE: 100%; Font-Weight: 500; oder {Textdekoration: Unterstreichung;}/*Der Unterstrich wird nicht standardmäßig angezeigt, wobei die Seite prägnant ist*/Ins, a {textdekoration: Keine;}/*IE6,7 FOCTION POINT Zeilenentfernung*/A: Focus,*: Focus {umriss: Keine;}/*Clear Float*/. {Clear: Beide; Überlauf: versteckt;}. clearFix {Zoom: 1; /* für IE6 IE7*/}. Clear {Clear: Beide; Anzeige: Block; Überlauf: Hidden; Höhe: 0; Zeilenhöhe: 0; Schriftgröße: 0;}/* Anzeige und verstecken, normalerweise verwendet, um mit JS*/. Ausblenden {Anzeige: keine! Wichtig; {float: links; Anzeige: Inline;}. Fr {float: rechts; Anzeige: Inline;}Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.