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
So installieren Sie MySQL 5.7.29 mit einem Klick mithilfe eines Shell-Skripts
Dieser Artikel bezieht sich auf die Arbeit des 51...
Fünf Möglichkeiten zum Durchlaufen von JavaScript-Arrays
Inhaltsverzeichnis 1. for-Schleife: grundlegend u...
Detaillierte Erklärung des Linux-Befehls unzip
Inhaltsverzeichnis 1. Unzip-Befehl 1.1 Syntax 1.2...
Linux /etc/network/interfaces Konfigurationsschnittstellenmethode
Die Datei /etc/network/interfaces wird in Linux z...
MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux
Vorwort: Vor Kurzem werde ich mit meinen Partnern...
Detailliertes Tutorial zum Upgrade der kostenlosen Installationsversion von MySQL 5.7.17 unter Windows (x86, 64 Bit)
MySQL muss auf Version 5.5.3 oder höher aktualisi...
Detaillierte Erklärung zur JavaScript-Datenabflachung
Inhaltsverzeichnis Was ist Abflachung? Rekursion ...
Detaillierte Erklärung der CSS-Stylesheets und des Formatlayouts
Stilvorlagen CSS (Cascading Style Sheets) wird zu...
So legen Sie die Parameter für die Post-Request-Druckeranforderung für Nginx-Protokolle fest
【Vorwort】 Die SMS-Funktion unseres Projekts beste...
Was bedeuten CN2, GIA, CIA, BGP und IPLC?
Was ist die CN2-Linie? CN2 steht für China Teleco...
Detaillierte Erläuterung zum Kopieren und Einfügen unter Linux in einer virtuellen VMware-Maschine
1. Linux unter VMware Workstation: 1. Quelle aktu...
Schritte zum Erstellen eines CentOS-Containers über Docker
Inhaltsverzeichnis Vorwort Erstellen Sie ein Brüc...
Einige Vorschläge zur Gewährleistung der MySQL-Datensicherheit
Daten sind das wichtigste Kapital eines Unternehm...
Navicat kann keine Funktionslösungsfreigabe erstellen
Als ich zum ersten Mal eine MySQL-FUNKTION schrie...
JavaScript-Canvas zum Erzielen von Meteoreffekten
In diesem Artikel wird der spezifische Code für J...