JavaScript implementiert Tab-Leisten-Umschalteffekte

<div Klasse="Tabulator">
        <div Klasse="Tab_Liste">
            <ul>
                <li class="current">Produkteinführung</li><!-- Das erste li ist standardmäßig ausgewählt, current bestimmt den Stil des roten Hintergrunds und des weißen Textes-->
                <li>Spezifikationen und Verpackung</li>
                <li>Kundendienstgarantie</li>
                <li>Produktbewertungen (50.000)</li>
                <li>Mobile Community</li>
            </ul>
        </div>
        <div Klasse="tab_con">
            <div class="item" style="display: block;"><!-- Dieses Element wird standardmäßig angezeigt, da der Anzeigewert aller Elemente „keines“ ist -->
                Inhalt des Moduls „Produkteinführung“</div>
            <div Klasse="Artikel">
                Spezifikationen und Inhalt des Verpackungsmoduls</div>
            <div Klasse="Artikel">
                Inhalt des Moduls „After-Sales-Garantie“</div>
            <div Klasse="Artikel">
                Produktbewertungen (50000) Modulinhalt</div>
            <div Klasse="Artikel">
                Inhalt des Mobile Community-Moduls</div>
 
        </div>
</div>

<Skript>
        // Geschäftsanforderung: Klicken Sie auf die Registerkartenleiste. Die angeklickte Registerkartenleiste hat einen anderen Stil, und das Div darunter sollte ebenfalls umgeschaltet werden, um den Effekt einer Inhaltsänderung zu erzielen. var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var tabs = document.querySelectorAll('.item');
        für (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index', i); // Füge jedem li ein benutzerdefiniertes data-index-Attribut hinzu, der Wert ist sein eigener Index in lis, dieser Wert ermöglicht es uns hauptsächlich festzustellen, auf welches li wir gerade klicken, um uns später dabei zu helfen, den Anzeigewert des entsprechenden div zu ändern lis[i].onclick = function () {
                // 1. Der erste Schritt besteht darin, die exklusive Idee zu verwenden, um dem Benutzer, der darauf klickt, ein Klassenattribut zuzuweisen. Beachten Sie, dass die Klassenwerte anderer nicht angeklickter Elemente leer gelassen werden müssen. Dies ist die exklusive Idee, andere zu töten und mich in Ruhe zu lassen für (var i = 0; i <lis.length; i++) {
                    lis[i].className = ''; // Verwenden Sie eine Schleife, um den Klassennamen aller (einschließlich Ihnen selbst) zu leeren}
                // Dann ändere den Klassennamen für dich selbst und überlasse es mir selbst. className = 'current'; // Der CSS-Stil des aktuellen Klassennamens wurde geschrieben // Dann muss der obige Tab-Leistenstil verarbeitet werden. Der zweite Schritt besteht darin, das entsprechende untergeordnete Div desjenigen anzuzeigen, auf den geklickt wurde, und die anderen auszublenden, auf die nicht geklickt wurde. Hier ist es hauptsächlich notwendig, zuerst zu wissen, auf wen der Benutzer geklickt hat, und dann die Anzeige des Objekt-Divs auf Blockieren einzustellen. Dazu ist immer noch exklusives Denken erforderlich // Schritt 2: Ändere den Anzeigeattributwert von div entsprechend dem Klick var index = this.getAttribute('index'); // Rufe den Index des aktuell angeklickten li ab
                for (var i = 0; i < lis.length; i++) { // Verwenden Sie eine Schleife, um die Anzeige aller Elemente auf „keine“ zu setzen und so alle zu beenden tabs[i].style.display = 'none';
                }
                // Sperren Sie in Tabs das Element, das dem Index von li entspricht, und ändern Sie seinen Anzeigewert in Block, sodass ich in Ruhe lasse tabs[index].style.display = 'block';
            }
        }
</Skript>