JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste
|
In diesem Artikel wird der spezifische JavaScript-Code zur einfachen Tab-Leiste zum Wechseln der Inhaltsleiste zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt HTML+CSS-Teil
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
/* CSS initialisieren, da es einen Standardrand gibt*{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{Schriftgröße:100%; Schriftstärke:normal;}
ol,ul{ Listenstil: keine;}
img,Feldsatz{ Rahmen:0 keine; Anzeige:Block;} */
div,ul,li{
Box-Größe: Rahmenbox;
Rand: 0;
Polsterung: 0;
}
ul{
Listenstiltyp: keiner;
}
A{
Textdekoration: keine;
}
#nav{
Breite: 450px;
Höhe: 400px;
Rand: 100px auto;/*links und rechts zentriert*/
Hintergrundfarbe: rosa;
Polsterung: 0;
Schriftgröße: 14px;
}
li{
schweben: links;
Breite: 150px;
Höhe: 30px;
Textausrichtung: zentriert;
Zeilenhöhe: 0,6rem;
Rand: 0,02rem durchgezogen #ccc;
}
.Inhalt{
klar: beides;
Position: relativ;
}
.inhalt div{
Breite: 450px;
Höhe: 370px;
Position: absolut;
Anzeige: keine;
}
.tab .wählen{
Hintergrundfarbe: himmelblau;
}
.Inhalt .aktuell{
Anzeige: Block;
}
</Stil>
<script src="jQuery.mini.js"></script>
</Kopf>
<Text>
<div id="nav">
<div Klasse="Tabulator">
<ul>
<li class="wählen" ><a href="#" > 1</a></li>
<li><a href="#" >2</a></li>
<li><a href="#" >3</a></li>
</ul>
</div>
<div Klasse="Inhalt">
<div Klasse="aktuell">1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>Nativer JS-Code
var lis = document.querySelectorAll('li');
var divs = document.querySelector('.content').querySelectorAll('div');
für(var i=0 ; i<lis.length ; i++){
lis[i].setAttribute('dateIndex',i);//Setze den Index jedes li, um das spätere Sperren der Inhaltsleiste zu erleichtern lis[i].addEventListener('click',function(){
für(var j=0 ; j<lis.length ; j++){
lis[j].className = ''; //Setze den Stil aller li auf leer}
this.className = 'choose'; //Stil des aktuell angeklickten li festlegen (exklusiv)
var index = this.getAttribute('dateIndex'); //Index der aktuellen Zeile abrufen
// konsole.log(index);
für(var j=0 ; j<lis.length ; j++){
divs[j].className = '';//Exklusiv// lis[i].className = 'wählen';
}
divs[index].className = "aktuell";
})
}
## jQuery-Methoden ```javascript
// jQuery-Methode $(function(){
$("li").klick(function(){
$(this).addClass("choose"); //Stile zum aktuell angeklickten li hinzufügen $(this).siblings("li").removeClass("choose"); //Stile von seinen Geschwisterelementen entfernen (exklusiv)
var index = $(this).index(); //Index des aktuell angeklickten Elements abrufen
$(".content div").eq(index).zeigen().siblings("div").hide();
// Holen Sie sich das entsprechende Inhaltsfeld über den Index, zeigen Sie es über show () an und verbergen Sie es dann, indem Sie das zugehörige Bruderelement auswählen und zerlegen ======》
//$(".content div").eq(index).show();
// $(".content div").eq(index).siblings("div").hide()
})
})
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 richten Sie Nginx so ein, dass der Domänenname an den angegebenen Port weitergeleitet wird
>>: RHEL7.5 MySQL 8.0.11 Installations-Tutorial
Artikel empfehlen
Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)
Swap deaktivieren Wenn auf dem Server ein Datenba...
Zusammenfassung häufig verwendeter Anweisungen zur Änderung mehrerer Tabellen in MySQL und Oracle
Ich habe diese Frage heute in der SQL-Schulungsfr...
Analyse des Prinzips und der Funktion der MySQL-Datenbank-Master-Slave-Replikation
Inhaltsverzeichnis 1. Datenbank-Master-Slave-Klas...
Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3
Die Verwendung von „Computed“ in vue3. Da vue3 mi...
Lassen Sie uns kurz über die Änderungen im Setup in vue3.0 sfc sprechen
Inhaltsverzeichnis Vorwort Standard-SFC-Schreibme...
Lösung - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Unzureichende Berechtigungen
1) Geben Sie den Ordnerpfad ein, in dem die JDK-D...
Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)
Konfigurationsdatei, die beim Systemstart geladen...
WeChat-Miniprogramme implementieren Sternebewertung
In diesem Artikel wird der spezifische Code für d...
Beispiel für die Implementierung des TikTok-Textschütteleffekts mit CSS
In der täglichen Entwicklung streiten sich Front-...
Mehrere Möglichkeiten zum Hinzufügen von Zeitstempeln in MySQL-Tabellen
Szenario: Die Daten in einer Tabelle müssen mithi...
Eine kurze Diskussion zu DDL und DML in MySQL
Inhaltsverzeichnis Vorwort 1. DDL 1.1 Datenbankop...
Diagramm der Installationszusammenfassung für MySQL 8.0.11
Installationsumgebung: CAT /etc/os-release Zeigt ...
Beispiel für die Verwendung von Docker Compose zum Erstellen einer Consul-Clusterumgebung
Grundbegriffe des Konsuls Servermodus und Clientm...
So passen Sie die Textgröße im Webdesign an: Kleiner Text, großes Erlebnis
Mit der Verbreitung mobiler Endgeräte wie dem iPa...
Gängige Methoden und Probleme der Docker-Bereinigung
Wenn Sie Docker für die Entwicklung im großen Maß...