In diesem Artikel wurde der Code mit Ihnen geteilt, um den Registerkarten -Switching -Effekt in nativen JS als Referenz zu implementieren. Der spezifische Inhalt ist wie folgt
1.html Teil
<body> <div id="tab"> <div> <ul> <li><a href="#">Current Affairs</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Entertainment</a></li> </ul> </div> <div> <div>Current Affairs</div> <div>Sports</div> <Div> Unterhaltung </div> </div> </body>
2. CSS -Teil: Es gibt viele Möglichkeiten, den Stilteil zu implementieren. Dies ist die einfache Demo, die ich geschrieben habe, das CSS, in dem ich am schlimmsten bin. <...
.Tab_Menu. Selected {Hintergrundfarbe: #aaa;} .tab_menu ul {Höhe: 30px;} .tab_menu ul li {float: links; Listenstil: Keine; Breite: 50px; Höhe: 30px; Farbe:#000; Grenze: solide 1px Grau; Border-Bottom: None; Text-Align: Mitte; Linienhöhe: 30px; Margin-Right: 3px;} .tab_Menu ul li a {textdekoration: none;} .tab_box {width: 170px; Höhe: 150px; Border: solide 1px Gray;3. Wichtiger JS -Teil:
window.onload = function () {var otab = document.getElementById ('tab'); var ali = otab.getElementsByTagName ('li'); var otabbox = otab.getElementsByTagName ('div') [1]; var abox = otabbox.getElementsByTagName ('div'); für (var i = 0; i <ali.length; i ++) {ali [i] .Index = i; ali [i] .onclick = function () {for (var j = 0; j <ali.length; j ++) {ali [j] .classname = ''; // Abbrechen des Menüstils Abox [j] .classname = 'hide'; // alle tabdivs} ali [this.index] .Classname = 'ausgewählt'; Abox [this.index] .className = ''; }}}Dies ist einfach und grob, und es wird nicht berücksichtigt, ob TabMenu und Tabox über mehrere Stile verfügen, und die Anpassung an das Projekt ist nur eine Denkweise. Viele Orte müssen verbessert werden. Das Folgende ist die Situation zu berücksichtigen, in der mehrere Klassen markiert sind, aber im Allgemeinen gibt es mehrere Klassen. Jetzt müssen wir die Fähigkeiten nutzen, um eine bestimmte Klasse zu entfernen und Klasse hinzuzufügen.
3.1 Fügen und löschen Sie die Klasse in nativen JS.
window.onload = function () {var otab = document.getElementById ('tab'); var ali = otab.getElementsByTagName ('li'); var otabbox = otab.getElementsByTagName ('div') [1]; var abox = otabbox.getElementsByTagName ('div'); für (var i = 0; i <ali.length; i ++) {ali [i] .Index = i; ali [i] .onclick = function () {for (var j = 0; j <ali.length; j ++) {var aclass = ali [j] .className.Split (''); // element.className ist eine Zeichenfolge, in ein Array var aclass1 = Abox. z = 0; z <aclass.length; z ++) {if (aclass [z] == 'ausgewählt') {aclass.spleplice (z, 1); // Verwenden Sie die Splice -Methode des Array, um die gefundene Klasse}} für (var k = 0; k <aclass1.Length; k+) zu löschen {if (aclass1 [k] == '{{{{if (aclass). ACLASS1.SPLICE (K, 1); }} ali [j] .className = aclass.join (''); // Alle Menüs entfernen den ausgewählten Stil Abox [j] .ClassName+= 'hide'; // Alle Boxen ausblenden Abox [this.index] .className = aclass1.join (''). Fügt ausgewählte Stil}}}} hinzuPersönliche Tests sind effektiv, aber sie sind alle in einer Methode ein bisschen unordentlich. Wenn es viele Klassen gibt, ist die Effizienz auch ein Problem, aber es sollte nicht viele Klassen geben == optimieren Sie es in Zukunft. Diese Funktion ist sehr einfach zu verwenden JQuery.
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.