Verwenden Sie reines JS, um den sekundären Menüeffekt zu erzielen

In diesem Artikelbeispiel wird der spezifische JS-Code zur Erzielung des sekundären Menüeffekts als Referenz angegeben. Der spezifische Inhalt ist wie folgt

js klickt auf das sekundäre Menü, klickt auf das sekundäre Menü und ändert das Hauptmenü in das sekundäre Menü

Klicken Sie hier, um das sekundäre Menü anzuzeigen

<Stil>
*{
                Rand: 0px automatisch;
                Polsterung: 0px;
                }
            .yiji{
                Breite: 200px;
                Höhe: 40px;
                Hintergrundfarbe: rot;
                Farbe: #fff;
                Textausrichtung: zentriert;
                Zeilenhöhe: 40px;h
                vertikale Ausrichtung: Mitte;
                Rand: 1px durchgezogen #FFF;
                }
            .erji1{
                Breite: 200px;
                Höhe: 40px;
                Hintergrundfarbe: #F63;
                Farbe: #fff;
                Textausrichtung: zentriert;
                Zeilenhöhe: 40px;
                vertikale Ausrichtung: Mitte;
                Rand: 1px durchgezogen #FFF;
                }
            #erji2{
                Anzeige: keine;
                                }
                 
            #erji3{
                Anzeige: keine;
                                }
                 
            #erji4{
                Anzeige: keine;
                                }
             
        </Stil>
    </Kopf>
     
    <Text>
        <div Klasse="yiji" onclick="Anzeigen('erji2')">Startseite</div>
        <div id="erji2">
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Anzeigen('erji3')">Talent</div>
        <div id="erji3">
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji4')">Markt</div>
        <div id="erji4">
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
            <div Klasse="erji1">1</div>
        </div>
    </body>
    <Skripttyp="text/javascript">
                Funktion Show(a)
        {
            var a = document.getElementById(a);
            wenn(a.style.display == "block")
            {
                a.style.display = "keine";  
            }
            anders
            {
                a.style.display = "Block";
            }
        }   

</Skript>

#caidan{
        Breite: 200px;
        Höhe: 40px;
        Rand: 1px durchgezogen #999;
        Textausrichtung: zentriert;
        Zeilenhöhe: 40px;
        vertikale Ausrichtung: Mitte;
        }
     .Liste{
       Breite: 200px;
       Höhe: 40px;
       Rand: 1px durchgezogen #999;
       Rahmenbreite oben: 0px;
       Textausrichtung: zentriert;
       Zeilenhöhe: 40px;
       vertikale Ausrichtung: Mitte;
       Anzeige: keine;
     }
      #caidan,.list:hover{
     Cursor:Zeiger;
                 
   }
  .list:hover{
                 
   Hintergrundfarbe: #63F;
}

<div Stil="Breite:200px; Höhe:400px;">
   <div id="caidan" onclick="Anzeigen()">China</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)">Shandong</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)">Jinan</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)"> Jining </div>
   <div Klasse = "Liste" onclick = "Xuan (dies)">Weihai</div>
   <div Klasse = "Liste" onclick = "Xuan (dies)"> Zibo</div>
</div>

Funktion Show()
        {
            var Liste = document.getElementsByClassName("Liste");
             
            //Liste anzeigen für (var i=0;i<list.length;i++)
            {
                Liste[i].style.display = "Block";   
            }  
        }
         
        Funktion Xuan(a)
        {
            var c = document.getElementById("caidan");
            c.innerHTML = a.innerHTML;
             
            var Liste = document.getElementsByClassName("Liste");
            //Liste anzeigen für (var i=0;i<list.length;i++)
            {
                Liste[i].style.display = "keine";
            }  
                 
        }

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:

Universeller sekundärer Menücode (CSS+JavaScript)
Implementieren Sie einfach js click, um die sekundäre Menüfunktion zu erweitern
Vue.js Beispielcode zum Anzeigen und Ausblenden des linken sekundären Menüs
Zeigen Sie sekundäre Menü-JS-Effekte an, wenn die Maus darüber fährt
js realisiert den Effekt des horizontalen Verschiebens des sekundären Menüs nach rechts
JavaScript-Maus darüber bewegen, um die Spezialeffekte des sekundären Menüs anzuzeigen
Analyse verschiedener Implementierungsmethoden des JS-Sekundärmenüs [4 Methoden]
Vue.js realisiert den sekundären Menüeffekt
JS implementiert eine extrem vereinfachte Reaktion auf die Maus, um den sekundären Menücode anzuzeigen
js realisiert den Effekt der Anzeige des aktuellen Inhalts durch Klicken auf das sekundäre Menü

<<: VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)

>>: JDBC-Erkundung SQLException-Analyse