Dieser Artikel teilt den Effekt der Auswirkung von JavaScript -Maus, um das sekundäre Menü für Ihre Referenz anzuzeigen. Der spezifische Inhalt ist wie folgt
1. Schlüsselcode: Verwenden Sie Switch oder wenn Urteilsanweisungen den entsprechenden sekundären Menüanzeigenmodus auf blockieren oder keine ändern
Funktion SelectTabMenu (i) {Switch (i) {case 71: document.getElementById ("tabMenucon71"). style.display = "block"; document.getElementById ("tabMenucon72"). style.display = "Keine"; document.getElementById ("tabMenucon73"). style.display = "Keine"; document.getElementById ("tabMenucon74"). style.display = "Keine"; document.getElementById ("tabMenucon75"). style.display = "Keine"; document.getElementById ("tabMenucon76"). style.display = "Keine"; brechen; ...}}2. Ereignis der Hauptnavigation Bindung
<ul>
<li> <a href = "#" onmouseover = "selectTabMenu (71)"> home </a> </li>
3. Sekundärmenü
<ul id = "tabmenucon71"> <li> <a href = "#"> Ankündigung </a> </li> <li> << a href = "#"> Informationen </a> </li> </ul>
4. CODE CODE
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <titels> Menü Horizontales Navigationsekunden-Level </title> <style type = "text/csS"> *{Padding: 0px; Rand: 0px; } .navbar {Höhe: 30px; Hintergrundfarbe: #2B383E; Text-Align: Mitte; } ul {Listenstil: Keine; } .nav li {float: links; } .nav li a {display: block; Polsterung: 0 20px; Höhe: 30px; Zeilenhöhe: 30px; Textdekoration: Keine; Farbe: #fff; } .nav li a: hover {Hintergrundfarbe: #ffff; Farbe: #4db6e7} .tabMenucon {Clear: Beide; Anzeige: Keine; } .TabMenucon li {display: Inline-Block; } </style> <script type = "text/javaScript"> Funktion SelectTabMenu (i) {Switch (i) {case 71: document.getElementById ("tabMenucon71"). style.display = "block"; document.getElementById ("tabMenucon72"). style.display = "Keine"; document.getElementById ("tabMenucon73"). style.display = "Keine"; document.getElementById ("tabMenucon74"). style.display = "Keine"; document.getElementById ("tabMenucon75"). style.display = "Keine"; document.getElementById ("tabMenucon76"). style.display = "Keine"; Fall 72: document.getElementById ("tabMenucon71"). style.display = "Keine"; document.getElementById ("tabMenucon72"). style.display = "block"; document.getElementById ("tabMenucon73"). style.display = "Keine"; document.getElementById ("tabMenucon74"). style.display = "Keine"; document.getElementById ("tabMenucon75"). style.display = "Keine"; document.getElementById ("tabMenucon76"). style.display = "Keine"; brechen; Fall 73: document.getElementById ("tabMenucon71"). style.display = "Keine"; document.getElementById ("tabMenucon72"). style.display = "Keine"; document.getElementById ("tabMenucon73"). style.display = "block"; document.getElementById ("tabMenucon74"). style.display = "Keine"; document.getElementById ("tabMenucon75"). style.display = "Keine"; document.getElementById ("tabMenucon76"). style.display = "Keine"; brechen; Fall 74: document.getElementById ("tabMenucon71"). style.display = "Keine"; document.getElementById ("tabMenucon72"). style.display = "Keine"; document.getElementById ("tabMenucon73"). style.display = "Keine"; document.getElementById ("tabMenucon74"). style.display = "block"; document.getElementById ("tabMenucon75"). style.display = "Keine"; document.getElementById ("tabMenucon76"). style.display = "Keine"; brechen; Fall 75: document.getElementById ("tabMenucon71"). style.display = "Keine"; document.getElementById ("tabMenucon72"). style.display = "Keine"; document.getElementById ("tabMenucon73"). style.display = "Keine"; document.getElementById ("tabMenucon74"). style.display = "Keine"; document.getElementById ("tabMenucon75"). style.display = "block"; document.getElementById ("tabMenucon76"). style.display = "Keine"; brechen; Fall 76: document.getElementById ("tabMenucon71"). style.display = "Keine"; document.getElementById ("tabMenucon72"). style.display = "Keine"; document.getElementById ("tabMenucon73"). style.display = "Keine"; document.getElementById ("tabMenucon74"). style.display = "Keine"; document.getElementById ("tabMenucon75"). style.display = "Keine"; document.getElementById ("tabMenucon76"). style.display = "block"; brechen; }} </script> </head> <body> <div> <ul> <li> <a href = "#" onmouseover = "selectTabMenu (71)"> home </a> </li> <li> <a href = "#"#"onmouseover =" selectTabMenu (72) ">"> " onmouseover = "selectTabMenu (73)"> Assoziationsnachrichten </a> </li> <li> <a href = "#" onmouseover = "selectTabMenu (74)"> Assoziationsaktivitäten </a> </li> <li> <a href = "#"#"ondovereover ="> i> <ai> <a href="#" onmouseover="selectTabMenu(76)">Resource Space</a></li> </ul> </div> <div id="TabMenuCon"> <ul id="TabMenuCon71"> <li><a href="#">Announcement</a></li> <li><<a href="#">Information</a></li> </ul> <ul id="TabMenuCon72"> <li>Introduction</li> <li>Information</a></li> </ul> <ul id="TabMenuCon72"> <li>Introduction</li> <li>Organization</li> <li>Association Articles</li> </ul> <ul id="TabMenuCon73"> <li>Information</li> </ul> <ul id="TabMenuCon73"> <li>Information</li> </ul> <ul id="TabMenuCon73"> <li>Information</li> </ul> <ul id="TabMenuCon74"> <li>Verdatory Maintenance Month</li> <li>Graphic Design Activities</li> <li>Program Design Activities</li> <li>Outdoor Expansion</li> </ul> <ul id="TabMenuCon75"> <li>Member Login</li> <li>Member Registration</li> <li>Pay Member Fees</li> <li>Member Information Management</li> <li>Modify Password</li> </ul> <ul id="TabMenuCon76"> <li>PS Tutorial</li> <li>Flash Tutorial</li> </ul> </div> </body> </html>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.