JavaScript-Plugin-Kapselung für Tabellenwechsel

In diesem Artikel wird der Kapselungscode von JavaScript zur Implementierung des Tabellenumschalt-Plugins zu Ihrer Information freigegeben. Der spezifische Inhalt ist wie folgt

Effektbild:

HTML-Teil:

<div Klasse="Box">
        <div id="tabBox">
            <ul>
                <li class="liStyle">Ein</li>
                <li>B</li>
                <li>C</li>
            </ul>
            <ol>
                <li class="liStyle">Ein</li>
                <li>B</li>
                <li>C</li>
            </ol>
        </div>
</div>

CSS-Teil:

#tabBox {
            Breite: 600px;
            Höhe: 450px;
            Rand: 3px durchgezogen #333;
        }
 
        #tabBox>ul {
            Breite: 100 %;
            Höhe: 50px;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
        }
 
        #tabBox>ul>li {
            biegen: 1;
            Höhe: 100%;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
            Farbe: #fff;
            Hintergrundfarbe: himmelblau;
            Schriftgröße: 30px;
        }
 
        #tabBox>ul .liStyle {
            Hintergrundfarbe: Limettengrün;
        }
 
 
        ol {
            biegen: 1;
            Breite: 600px;
            Höhe: 400px;
        }
 
        ol>li {
            Breite: 100 %;
            Höhe: 100%;
            Hintergrundfarbe: #ccc;
            Farbe: #fff;
            Schriftgröße: 100px;
 
            Anzeige: keine;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
        }
 
        ol>li.liStyle {
            Anzeige: Flex;
        }

JavaScript-Konstruktorteil:

Funktion fn15() {
            Funktion TabBox(Tabbox) {
                diese.tabbox = tabbox;
 
                diese.tabs = tabbox.querySelectorAll("ul>li")
                dieser.Inhalt = tabbox.querySelectorAll("ol>li")
            }
 
            TabBox.prototype.startSwitch = Funktion () {
                const tb = dies
 
                tb.tabs.fürJeden(
                    Funktion (Tabulator, Index) {
                        tab.onclick = Funktion (e) {
                            tb.tabs.fürJeden(
                                Funktion (Tabulator) {
                                    tab.classList.remove("liStyle")
                                }
                            )
 
                            tb.contents.fürJeden(
                                Funktion (con) {
                                    con.classList.remove("liStyle")
                                }
                            )
 
                            tab.classList.add("liStyle")
 
                            tb.contents[index].classList.add("liStyle")
                        }
                    }
                )
            }
            const tabBox = document.querySelector("#tabBox")
 
            const tb = neue TabBox(tabBox)
 
            tb.startSwitch()
        }
        // fn15()
 
        // Verwende Klasse um Funktion fn16() zu implementieren {
            Klasse TabBox {
                Konstruktor(Tabbox) {
                    diese.tabbox = tabbox;
                    diese.tabs = tabbox.querySelectorAll("ul>li")
                    dieser.Inhalt = tabbox.querySelectorAll("ol>li")
                }
                startSwitch() {
                    const tb = dies
 
                    tb.tabs.fürJeden(
                        Funktion (Tabulator, Index) {
                            tab.onclick = Funktion (e) {
                                tb.tabs.fürJeden(
                                    Funktion (Tabulator) {
                                        tab.classList.remove("liStyle")
                                    }
                                )
 
                                tb.contents.fürJeden(
                                    Funktion (con) {
                                        con.classList.remove("liStyle")
                                    }
                                )
 
                                tab.classList.add("liStyle")
 
                                tb.contents[index].classList.add("liStyle")
                            }
                        }
                    )
                }
            }
 
 
            const tabBox = document.querySelector("#tabBox")
 
            const tb = neue TabBox(tabBox)
 
            tb.startSwitch()
        }
fn16()

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-Implementierung der Stilwechselfunktion tableCSS-Beispiel
So implementieren Sie mit JavaScript die Farbtrennung von Tabellen und die Hervorhebung von Auswahlen (und wechseln Daten dynamisch)
JavaScript verwendet die Pfeiltasten zur Steuerung des Cursors zum Wechseln zwischen Tabellenzellen
Vier Möglichkeiten zum Implementieren des Tab-Umschaltens in Javascript
Ein optimierter JS DIV-Layer-Tab-Umschaltcode
Natives js zum Erzielen eines Tab-Wechsels
JS+CSS zum Erzielen eines gleitenden Umschalt-Tab-Menüeffekts
js implementiert Klicken zum Wechseln der TAB-Tag-Instanz
Ein vollständiges Beispiel für den von JS implementierten Tab-Seitenwechseleffekt
Die Vue.js-Komponentenregisterkarte implementiert das Wechseln zwischen Registerkarten

<<: Einfache Implementierung von HTML zum Erstellen eines persönlichen Lebenslaufs

>>: Detaillierte Erklärung der langsamen Remote-Verbindung von Navicat zu MySQL