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
HTML-Grundlagen: HTML-Inhaltsdetails
Beginnen wir mit dem Körper: Wenn Sie eine Webseit...
So dekomprimieren Sie mehrere Dateien mit dem Befehl „unzip“ in Linux
Lösung für das Problem, dass in Linux kein Entpac...
Das WeChat-Applet realisiert einen mehrzeiligen Text-Scroll-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
Details zu gängigen Javascript-Funktionen höherer Ordnung
Inhaltsverzeichnis 1. Gemeinsame Funktionen höher...
VMware vsphere 6.5 Installationstutorial (Bild und Text)
vmware vsphere 6.5 ist die klassische Version der...
Erste Schritte mit den JavaScript-Grundlagen
Inhaltsverzeichnis 1. Wo man JavaScript schreibt ...
css3-Animation, Ballrollen, js-Steuerung, Animationspause
Mit CSS3 können Animationen erstellt werden, die ...
Detaillierte Erläuterung des MySQL-Ausführungsprinzips, der logischen Schichtung und der Änderung der Datenbankverarbeitungs-Engine
Da ich MySQL schon so lange verwende, glaube ich,...
Drei Methoden zum automatischen Vervollständigen von Befehlen in der MySQL-Datenbank
Hinweis: Die dritte Methode wird nur in XSell ver...
Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen
Inhaltsverzeichnis Vorwort 1. Aktuelle Uhrzeit er...
HTML-Optimierungstechniken, die Sie kennen müssen
Um die Leistung von Webseiten zu verbessern, begi...
Detaillierte Erläuterung der Überwachung des Jenkins-Prozesses basierend auf Zabbix
1. Überwachungsarchitekturdiagramm 2. Umsetzungsi...
Rufen Sie die Schriftart entsprechend dem Schriftnamen auf, damit der Browser die gewünschte Schriftart anzeigt
Frage 1: Wie weisen Sie den Browser an, die gewüns...
So installieren Sie MySQL mit Yum auf Centos7 und stellen eine Remote-Verbindung her
Centos7 verwendet Yum, um MySQL zu installieren u...