JavaScript zum Erzielen eines Tab-Umschalteffekts

In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung des Tab-Umschalteffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Erstellen Sie die Hauptschnittstelle

HTML Code

<h1>Erkennen Sie den Tab-Umschalteffekt</h1>
<ul id="Registerkarte">
    <li><a href="">Filme und Fernsehen</a></li>
    <li><a href="">Unterhaltung</a></li>
    <li><a href="">Fernsehserien</a></li>
</ul>
<div id="Inhalt">
    <div id="content1">Neueste Film-Empfehlungen:<br>"Fast and Furious"<br>"Baymax - Riesiges Robowabohu"</div>
    <div id="content2">Heiße Unterhaltungsempfehlungen:<br>„Running Man“<br>„The Voice of China“</div>
    <div id="content3">Beliebte TV-Serien-Empfehlungen:<br>„Drei Leben, drei Welten“<br>„Unsere Zeit“</div>
</div>

Schreiben von CSS-Dateien

Erstellen Sie eine neue CSS-Datei und schreiben Sie CSS-Code, um die zuvor geschriebene HTML-Schnittstelle zu rendern.

Denken Sie daran, die CSS-Datei in die HTML-Datei zu importieren.

<link rel="stylesheet" href="mCSS.css" >

CSS-Dateicode

*{
    Rand: 0;
    Polsterung: 0;
}
 
#tab {
    Überlauf: versteckt;
}
 
#tab li {
    schweben: links;
    Listenstil: keiner;
    Breite: 80px;
    Höhe: 40px;
    Textausrichtung: zentriert;
}
 
#tab li:erstes-kind, #content1 {
    Hintergrund: #ffcc00;
}
 
#tab li:erstes-kind + li, #inhalt2 {
    Hintergrund: #ff00cc;
}
 
#tab li:last-child, #content3 {
    Hintergrund: #00ccff;
}
 
#tab li a {
    Zeilenhöhe: 40px;
    Farbe: weiß;
    Textdekoration: keine;
}
 
#Inhalt {
    Position: relativ;
}
 
#Inhalt1, #Inhalt2, #Inhalt3 {
    Breite: 300px;
    Höhe: 100px;
    Position: absolut;
    oben: 0;
    links: 0;
    Polsterung: 30px;
    Anzeige: keine;
}
 
#Inhalt1{
    Anzeige: Block;
}

Schreiben Sie JavaScript-Skriptdateien, um Schalteffekte zu erzielen

JavaScript-Code

// Wenn auf ein bestimmtes Label geklickt wird, wird das entsprechende Div angezeigt und die anderen werden ausgeblendet.
// Suche das Element, das das Ereignis ausgelöst hat var as = document.querySelectorAll("#tab a");
// Bind-Ereignisverarbeitungsfunktion für (var i = 0; i < as.length; i++) {
    als[i].onclick = Funktion () {
        // Alle Divs ausblenden
        var divs = document.querySelectorAll("#content>div");
        für (var i = 0; i < divs.Länge; i++) {
            divs[i].style.display = "keine";
        }
        // Lasse das entsprechende div anzeigen // Hole den href des aktuellen a
        var i = this.href.lastIndexOf("#");
        var id = this.href.slice(i);
        Konsole.log(Ich würde)
        document.querySelector(id).style.display = "Block";
    }
 
}

Vollständiger Fallcode

mHTML.html

<link rel="stylesheet" href="mCSS.css" >
 
<h1>Erkennen Sie den Tab-Umschalteffekt</h1>
<ul id="Registerkarte">
    <li><a href="#content1" >Filme und Fernsehen</a></li>
    <li><a href="#content2" >Unterhaltung</a></li>
    <li><a href="#content3" >Fernsehserien</a></li>
</ul>
<div id="Inhalt">
    <div id="content1">Neueste Film-Empfehlungen:<br>"Fast and Furious"<br>"Baymax - Riesiges Robowabohu"</div>
    <div id="content2">Heiße Unterhaltungsempfehlungen:<br>„Running Man“<br>„The Voice of China“</div>
    <div id="content3">Beliebte TV-Serien-Empfehlungen:<br>„Drei Leben, drei Welten“<br>„Unsere Zeit“</div>
</div>
 
 
<script src="mJS.js"></script>

mCSS.css

*{
    Rand: 0;
    Polsterung: 0;
}
 
#tab {
    Überlauf: versteckt;
}
 
#tab li {
    schweben: links;
    Listenstil: keiner;
    Breite: 80px;
    Höhe: 40px;
    Textausrichtung: zentriert;
}
 
#tab li:erstes-kind, #content1 {
    Hintergrund: #ffcc00;
}
 
#tab li:erstes-kind + li, #inhalt2 {
    Hintergrund: #ff00cc;
}
 
#tab li:last-child, #content3 {
    Hintergrund: #00ccff;
}
 
#tab li a {
    Anzeige: Block;
    Breite: 100 %;
    Höhe: 100%;
    Zeilenhöhe: 40px;
    Farbe: weiß;
    Textdekoration: keine;
}
 
#Inhalt {
    Position: relativ;
}
 
#Inhalt1, #Inhalt2, #Inhalt3 {
    Breite: 300px;
    Höhe: 100px;
    Position: absolut;
    oben: 0;
    links: 0;
    Polsterung: 30px;
    Anzeige: keine;
}
 
#Inhalt1{
    Anzeige: Block;
}

mJS.js

// Wenn auf ein bestimmtes Label geklickt wird, wird das entsprechende Div angezeigt und die anderen werden ausgeblendet.
// Suche das Element, das das Ereignis ausgelöst hat var as = document.querySelectorAll("#tab a");
// Bind-Ereignisverarbeitungsfunktion für (var i = 0; i < as.length; i++) {
    als[i].onclick = Funktion () {
        // Alle Divs ausblenden
        var divs = document.querySelectorAll("#content>div");
        für (var i = 0; i < divs.Länge; i++) {
            divs[i].style.display = "keine";
        }
        // Lasse das entsprechende div anzeigen // Hole den href des aktuellen a
        var i = this.href.lastIndexOf("#");
        var id = this.href.slice(i);
        Konsole.log(Ich würde)
        document.querySelector(id).style.display = "Block";
    }
 
}

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:

Der einfachste Weg zum Umschalten der Tab-Seite in JavaScript (4 Typen)
Vue.js realisiert den Tab-Umschalteffekt
Detaillierte Erläuterung klassischer Beispiele der AngularJS-Tab-Umschaltfunktion
JS realisiert den Tab-Umschalteffekt
Der einfachste Weg, den Tab-Seitenwechsel mit reinem JavaScript zu implementieren (empfohlen)
JS zum Erzielen des Tab-Umschalteffekts – Beispielcode
Eine einfache Registerkarte mit Stil, geschrieben in reinem CSS+JS
JS realisiert Tab-Effekt (mit CSS)
Zwei Möglichkeiten zur Implementierung von Tabs in AngularJS

<<: So zentrieren Sie Bilder horizontal und vertikal in DIV oder DIV

>>: Absatzlayout und Zeilenumbrüche in HTML-Webseiten