Tab-Effekte mit JS schreiben

In diesem Artikelbeispiel wird der spezifische Code für JS zum Schreiben von Tab-Effekten zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
<head lang="de">
    <meta charset="UTF-8">
    <Titel></Titel>
    <Stil>
        *{
            Polsterung: 0;
            Rand: 0;
        }
        .selectka {
            Breite: 500px;
            Höhe: 400px;
            Rand: automatisch;
            Rahmen: 1px durchgezogen #09e1ff;
        }
        .links rechts{
            schweben: links;
            Höhe: 400px;
        }
        #Speisekarte{
            Textausrichtung: zentriert;
            Zeilenhöhe: 80px;
            Schriftgröße: 20px;
            Farbe: lila;
        }
        li{
            Listenstil: keiner;
        }
        #menu>li{
            Breite: 100px;
            Höhe: 80px;
            Rahmen: 1px gestrichelt blauviolett;
            Box-Größe: Rahmenbox;
        }
        .Rechts{
            Position: relativ;
            Breite: 399px;
            Hintergrund: rosa;
            Rand links: 1px;
            Textausrichtung: zentriert;
            Schriftgröße: 100px;
            Zeilenhöhe: 400px;

        }

        .rechts li{
            Position: absolut;
            Breite: 399px;
            Höhe: 400px;
            Anzeige: keine;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Auswahlka">
    <div Klasse="links">
        <ul id="Menü">
            <li class="menulist">Kleidung</li>
            <li class="menulist">Schönheit</li>
            <li class="menulist">Taschen</li>
            <li class="menulist">Essen</li>
            <li class="menulist">Schmuck</li>
        </ul>
    </div>
    <div Klasse="rechts">
        <ul>
            <li class="numlist">Kleidung</li>
            <li class="numlist">Schönheit</li>
            <li class="numlist">Tasche</li>
            <li class="numlist">Essen</li>
            <li class="numlist">Schmuck</li>
        </ul>
    </div>
</div>
<Skript>
    var Menüliste = document.getElementsByClassName("Menüliste");
    var num_list = document.getElementsByClassName("numlist");
    var moo = null;
    var yuu=null;
        für(var i=0;i<menu_list.length;i++) {
            Menüliste[i].index = i;
            Menüliste[i].onmouseenter = Funktion () {
                /* console.log(this.index);*/ //this.index ist der Indexwert des aktuellen Ziels/* for(var k=0;k<num_list.length;k++){
                    num_list[k].style.display = "keine";
                }
                num_list[this.index].style.display = "Block";
            }*/
                wenn(yuu)yuu.style.background = "keine";
                dieser.Stil.Hintergrund = "gelb";
                yuu=dies;
                 wenn(moo)moo.style.display="keine";
                num_list[this.index].style.display = "Block";
                moo = Anzahl_Liste[diesen.index];
        }
}
</Skript>
</body>
</html>

Effektbild:

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: