Implementierung einfacher Tabs mit js
|
Tab-Auswahlkarten werden auf echten Webseiten sehr häufig verwendet. Grundsätzlich muss jede Webseite eine oder mehrere Tab-Auswahlkarten verwenden. Wir können js verwenden, um einen einfachen Tab-Auswahleffekt zu erzielen Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Einfacher Kartenauswahleffekt</title>
<Stil>
Körper,ul{
Rand: 0;
Polsterung: 0;
}
li{
Listenstil: keiner;
}
.nav ul{
Anzeige: Flex;
}
.nav li{
Breite: 40%;
Rand: 1rem;
Textausrichtung: zentriert;
Schriftgröße: 1,3rem;
}
.ausgewählt{
Hintergrundfarbe: gelb;
}
.inhalt div{
Anzeige: keine
}
/* Zunächst wird nur der erste Inhaltsblock angezeigt*/
.content div:nth-child(1){
Anzeige: Block;
}
</Stil>
</Kopf>
<Text>
<div Klasse="nav">
<ul>
<!-- Zunächst die erste Option auswählen -->
<li class="selected">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
<div Klasse="Inhalt">
<div>Inhalt 1</div>
<div>Inhalt 2</div>
<div>Inhalt 3</div>
</div>
<Skript>
//Alle Navigationsoptionen abrufen var li = document.querySelectorAll(".nav li");
//Alle Divs des Inhalts abrufen
var div = document.querySelectorAll(".content div")
für(var i=0;i<li.length;i++){
//Der Schlüssel besteht darin, eine Verbindung zwischen li und div herzustellen li[i].index=i;
li[i].onmouseover=Funktion(){
// Alle Optionsstile löschen und sämtliche Inhalte ausblenden for(var j=0;j<li.length;j++){
li[j].className="";
div[j].style.display="keine"
}
//Legen Sie den Stil für die Option fest, über der die Maus schwebt. Das entsprechende Div wird angezeigt. this.className="selected";
div[diesen.index].style.display="block";
}
}
</Skript>
</body>
</html> Es ist zu beachten, dass: dies zu diesem Zeitpunkt gleichbedeutend mit li[i] ist. Das korrekte Wirkungsdiagramm lautet:
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 lösen Sie das Problem des verstümmelten MySQL-Inserts
Artikel empfehlen
vue2.x-Konfiguration von vue.config.js zur Projektoptimierung
Inhaltsverzeichnis Vorwort vue.config.js-Konfigur...
Beispiel für die Konfiguration mehrerer virtueller Hosts in nginx
Es ist sehr praktisch, den virtuellen Host vhost ...
Übung zum Hochladen von Element-Avataren
Dieser Artikel verwendet die offizielle Element-W...
Der Datenordner konnte während der Installation von mysql8.0.14.zip nicht automatisch erstellt werden. Der Dienst kann nicht gestartet werden.
Nachdem ich das System heute neu installiert hatt...
Wie implementiert Vue die Kommunikation zwischen Komponenten?
Inhaltsverzeichnis 1. Kommunikation zwischen Vate...
Detaillierte Erklärung zum Erstellen einer MySQL-Master-Slave-Umgebung mit Docker
Vorwort Dieser Artikel beschreibt, wie ich Docker...
Detaillierte Erklärung der neuen Funktionen von ES9: Asynchrone Iteration
Inhaltsverzeichnis Asynchrones Durchlaufen Asynch...
Beispielmethode zum Anzeigen von IP in Linux
Die Kenntnis der IP-Adresse eines Geräts ist wich...
Implementierung des gemeinsamen Grid-Layouts
Keine Lücken auf beiden Seiten, Lücken zwischen j...
So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image
Führen Sie zunächst eine einfache Docker-Installa...
Tutorial zur Ein-Klick-Installation von Docker und Docker-Compose (unterstützt online und offline)
Shell-Skript #!/bin/sh # Aktuelles Verzeichnis CU...
Vergleichende Analyse von MySQL Binlog-Protokollverarbeitungstools
Inhaltsverzeichnis Kanal Maxwell Datenbus Datenüb...
Tabelle Tag (Tabelle) Im Detail
<br />Tabelle ist ein Tag, das schon seit la...
So stellen Sie eine Datenbank und eine Tabelle aus einer vollständigen MySQL-Datenbanksicherung wieder her
Wie kann ich im offiziellen MySQL-Dump-Tool nur e...
Schwebendes Menü, kann einen Bildlaufeffekt nach oben und unten erzielen
Der Code kann noch weiter optimiert werden. Aus Z...