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
Vue implementiert grafischen Überprüfungscode
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung zur Verwendung der benutzerdefinierten Vue-Baumsteuerung
In diesem Artikel erfahren Sie, wie Sie das benut...
Detaillierte Erklärung des Parameters slave_exec_mode in MySQL
Heute habe ich zufällig den Parameter slave_exec_...
Zusammenfassung mehrerer Situationen, in denen MySQL-Indizes fehlschlagen
1. Indizes speichern keine Nullwerte Genauer gesa...
Mysql5.7.14 Linux-Version Passwort vergessen perfekte Lösung
Fügen Sie in der Datei /etc/my.conf unter [mysqld...
So stellen Sie mit Node-Red eine Verbindung zur MySQL-Datenbank her
Um Node-red mit der Datenbank (mysql) zu verbinde...
HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)
Diese eingeführten HTML-Tags entsprechen nicht un...
Detaillierte Erklärung zur Verwendung von JavaScript WeakMap
Ein WeakMap-Objekt ist eine Sammlung von Schlüsse...
SSM VUE Axios Detaillierte Erklärung
Inhaltsverzeichnis Wie wird das SQL-Protokoll ang...
Beispiel-Tutorial zur JavaScript-Typerkennungsmethode
Vorwort JavaScript ist eine der am häufigsten ver...
Detaillierte Erläuterung des Quellcodes der vue.$set()-Methode von Vue
Bei der Verwendung von Vue zum Entwickeln von Pro...
Detaillierte Erklärung des Problems mit verstümmelten chinesischen Schriftzeichen in der MySQL-Datenbank
Beim insert into employee values(null,'張三'...
MySql implementiert die Seitenabfragefunktion
Zunächst müssen wir klarstellen, warum wir pagini...
Lösung für den ineffektiven Rand von in HTML verschachtelten Divs
Hier ist eine Lösung für das Problem, dass der Ra...
Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen
Empfohlene Artikel: Klicken Sie auf die untere re...