JavaScript zum Erzielen eines Tab-Umschalteffekts

<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>

<link rel="stylesheet" href="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 {
    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;
}

// 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";
    }
 
}

<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>

*{
    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;
}

// 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";
    }
 
}