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.
li[i].index=i; Dieser Schritt ist wichtig, da er der Schlüssel zum Herstellen einer Verbindung zwischen li und div ist. Wenn Sie den Code div[this.index].style.display="block"; direkt in div[i].style.display="block"; ändern, wird der Effekt nicht erreicht. Dies liegt daran, dass der Wert von i immer um eins ansteigt und schließlich gleich li.length ist, was zu einem falschen Ergebnis führt, da unabhängig davon, auf welcher Option sich die Maus befindet, kein div angezeigt wird.

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:

js zur Implementierung einer einfachen Tab-Funktion
js, um einen einfachen umschaltbaren Tab-Effekt zu erzielen
Implementierungsmethode für die JS-Registerkarte
JavaScript realisiert den Tab-Umschalteffekt (selbstgeschriebenes natives JS)
Detaillierte Erklärung der JS-Implementierung des Tab-Beispiels
js, um einen Tab-Tab-Umschalteffekt zu erzielen
Zwei Möglichkeiten zum Schreiben von JS-Tab-Plugins (jQuery und Klasse)
js verwendet iframe, um einen Tab-Effekt zu erzielen
js zur Realisierung einer einfachen Tab-Erstellung
Tab-Effekte mit JS schreiben

<<: So lösen Sie das Problem des verstümmelten MySQL-Inserts

>>: Detaillierte Erläuterung der Bereitstellungs- und Konfigurationsmethoden des Linux-Zabbix-Agenten

Beheben Sie das Problem, dass beim Herunterfahren von Tomcat mit shutdown.bat auch andere Tomcats heruntergefahren werden.

Artikel

JavaScript zur Implementierung eines einfachen Einkaufsformulars

Implementierung einfacher Tabs mit js

Beheben Sie das Problem, dass beim Herunterfahren von Tomcat mit shutdown.bat auch andere Tomcats heruntergefahren werden.

JavaScript zur Implementierung eines einfachen Einkaufsformulars

JavaScript-Grundlagen dieser Verweisung

JQuery implementiert das Ausblenden und Anzeigen von Animationseffekten

Ursachenanalyse und Lösung des E/A-Fehlers beim Löschen einer MySQL-Tabelle

Detaillierte Erklärung zur Verwendung von Vue Smooth DnD, einer verschiebbaren Komponente von Vue

Füllen Sie die Suchfunktion auf der HTML-Seite aus

MySQL-Daemon konnte nicht gestartet werden – Fehlerlösung

Detaillierte Erklärung der vertikalen und horizontalen Ausrichtung des Bootstrap-Rasters

LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung

Artikel empfehlen

Beispiel für die Implementierung von QR-Code-Scaneffekten mit CSS3

Lösung für den Fehler beim Laden der dynamischen Bibliothek, wenn ein Linux-Programm ausgeführt wird

Detaillierte Erläuterung des Linux-Befehls zur Änderung des Hostnamens

So implementieren Sie geplante Sicherungen und inkrementelle Sicherungen hochgeladener Dateien in Linux

Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu

CSS implementiert sechs adaptive zweispaltige Layoutmethoden

So trennen Sie statischen und dynamischen Status durch die Kombination von Apache und Tomcat

Der Prozess der JDK-Installation und Konfiguration von Umgebungsvariablen unter WIN10 (detaillierte Version)

So deaktivieren Sie die Klartextanzeige und die Schnelllöschfunktion von IE10

Ein Beispiel zur Optimierung eines Projekts nach Abschluss des Vue-Projekts

Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux

Implementierungsschritte für die Paketierung und Optimierung von Vue-Projekten

JavaScript-Selektorfunktionen querySelector und querySelectorAll

Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.

Eine einfache Methode, um mit der TabBar am unteren Rand des WeChat-Applets umzugehen, das Inhalte blockiert