jQuery implementiert verschachtelte Tab-Funktion
|
In diesem Artikelbeispiel wird der spezifische Code von jQuery zur Implementierung der verschachtelten Tab-Funktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Zusammenfassung der Wissenspunkte:1.siblings(): Geschwisterelemente, holt die Geschwister jedes Elements im passenden Satz, Filterung nach Selektor ist optional. 2.removeClass(): Methode entfernt eine oder mehrere Klassen aus den ausgewählten Elementen. 3.addClass(): Methode fügt den ausgewählten Elementen eine oder mehrere Klassen hinzu. 4.eq(): Die Methode reduziert die Menge der übereinstimmenden Elemente auf das Element am angegebenen Index. 5.hide() und show(): Spezialeffekte ausblenden und anzeigen. 6.parent(): Ruft das übergeordnete Element jedes Elements im aktuellen Satz übereinstimmender Elemente ab. Die Verwendung eines Selektors zum Filtern ist optional. 7.find(): Die Methode ruft die Nachkommen jedes Elements im aktuellen Elementsatz ab und filtert nach Selektor, jQuery-Objekt oder Element. 8.index(): Die Methode gibt die Indexposition des angegebenen Elements relativ zu anderen angegebenen Elementen zurück. 1.html
<Text>
<div id="div1">
<input Klasse="aktiv" Typ="Schaltfläche" Wert="Tab1" />
<Eingabetyp="Schaltfläche" Wert="Tab2" />
<Eingabetyp="Schaltfläche" Wert="Tab3" />
<Eingabetyp="Schaltfläche" Wert="Tab4" />
<Eingabetyp="Schaltfläche" Wert="Tab5" />
</div>
<div Klasse="box1" Stil="Anzeige:Block;">
<div Klasse="box2" Stil="Anzeige:Block;">
Registerkarte1-1
</div>
<div Klasse="Box2">
Registerkarte1-2
</div>
<div Klasse="Box2">
Registerkarte1-3
</div>
<input Klasse="aktiv" Typ="Schaltfläche" Wert="Tab1-1" />
<Eingabetyp="Schaltfläche" Wert="Tab1-2" />
<Eingabetyp="Schaltfläche" Wert="Tab1-3" />
</div>
<div Klasse="Box1">
<div Klasse="box2" Stil="Anzeige:Block;">
Registerkarte2-1
</div>
<div Klasse="Box2">
tab2-2
</div>
<div Klasse="Box2">
Registerkarte2-3
</div>
<input Klasse="aktiv" Typ="Schaltfläche" Wert="tab2-1" />
<Eingabetyp="Schaltfläche" Wert="Tab2-2" />
<Eingabetyp="Schaltfläche" Wert="Tab2-3" />
</div>
<div Klasse="Box1">
<div Klasse="box2" Stil="Anzeige:Block;">
Registerkarte3-1
</div>
<div Klasse="Box2">
Registerkarte 3-2
</div>
<div Klasse="Box2">
Registerkarte3-3
</div>
<input Klasse="aktiv" Typ="Schaltfläche" Wert="tab3-1" />
<Eingabetyp="Schaltfläche" Wert="Tab3-2" />
<Eingabetyp="Schaltfläche" Wert="Tab3-3" />
</div>
<div Klasse="Box1">
<div Klasse="box2" Stil="Anzeige:Block;">
Registerkarte4-1
</div>
<div Klasse="Box2">
Registerkarte4-2
</div>
<div Klasse="Box2">
Registerkarte4-3
</div>
<input Klasse="aktiv" Typ="Schaltfläche" Wert="tab4-1" />
<Eingabetyp="Schaltfläche" Wert="Tab4-2" />
<Eingabetyp="Schaltfläche" Wert="Tab4-3" />
</div>
<div Klasse="Box1">
<div Klasse="box2" Stil="Anzeige:Block;">
Registerkarte 5-1
</div>
<div Klasse="Box2">
tab5-2
</div>
<div Klasse="Box2">
Registerkarte 5-3
</div>
<input Klasse="aktiv" Typ="Schaltfläche" Wert="tab5-1" />
<Eingabetyp="Schaltfläche" Wert="Tab5-2" />
<Eingabetyp="Schaltfläche" Wert="Tab5-3" />
</div>
</body>2. jQquery
<script src="js/js.js"></script>
<Skript>
$('#div1>:button').on('klicken', function(){
$(this).addClass('aktiv').siblings().removeClass('aktiv');
// Der Index der angeklickten Schaltfläche in der roten Schaltfläche let i = $(this).index();
$('.box1').eq(i).anzeigen().siblings('.box1').hide();
});
$('.box1>:button').on('klicken',function(){
$(this).addClass('aktiv').siblings('Eingabe').removeClass('aktiv');
// Der Index der drei Eingaben derselben Generation wie die angeklickte Schaltfläche let i = $(this).parent().find('input').index(this);
$(diese).parent().find('div').eq(i).show().siblings('div').hide();
})
Ausführungsergebnis:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So verwenden Sie den Linux-Befehl whatis
Artikel empfehlen
Analyse des MySQL-Sperrmechanismus und der Verwendung
Dieser Artikel veranschaulicht anhand von Beispie...
So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle
Einfach ausgedrückt besteht die MySQL-Wurmreplika...
Einige Vorschläge zur Gewährleistung der MySQL-Datensicherheit
Daten sind das wichtigste Kapital eines Unternehm...
Eine umfassende Zusammenfassung häufig verwendeter Anweisungen in MySQL (unbedingt lesen)
Die unten zusammengefassten Wissenspunkte werden ...
MySQL 5.6 Installationsschritte mit Bildern und Text
MySQL ist ein Open-Source-Verwaltungssystem für k...
Die Tücken der automatischen Inkrementierung numerischer MySQL-Typen
Beim Entwurf von Tabellenstrukturen gehören numer...
Detaillierte Erläuterung der Leistungsoptimierung des Web-Frontends: Zusammenführung und Komprimierung von Ressourcen
Ressourcenzusammenführung und -komprimierung für ...
So implementieren Sie die Online-Hot-Migration von virtuellen KVM-Maschinen (Bild und Text)
1. Migrationsmethode für virtuelle KVM-Maschinen ...
Analyse des MySQL-Beispiels DTID Master-Slave-Prinzip
Inhaltsverzeichnis 1. Grundkonzepte von GTID 2. G...
Linux verwendet NetworkManager, um Ihre MAC-Adresse zufällig zu generieren
Egal, ob Sie zu Hause auf dem Sofa oder draußen i...
So konfigurieren Sie die bidirektionale Zertifikatsüberprüfung auf dem Nginx-Proxyserver
Generieren einer Zertifikatskette Verwenden Sie d...
Eine kurze Einführung in Linux-Leistungsüberwachungsbefehle kostenlos
Wie können wir den Fehler lokalisieren, wenn im S...
Detailliertes Tutorial zur Verwendung von VMware WorkStation mit Docker für Windows
Inhaltsverzeichnis 1. Einleitung 2. Installieren ...
Vorteile und Prinzipien der MySQL-Replikation im Detail erklärt
Bei der Replikation werden die DDL- und DML-Opera...
Beispielerklärung für Ausführungskontext und Ausführungsstapel in JavaScript
JavaScript - Prinzipienreihe Wenn wir in der tägl...