Dieser Artikel beschreibt die Methode zur Implementierung des Multi-Option-Switching-Navigationsmenüs mit JS. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = gb2312">
<titels> Menü "Mehrfachoption" umschalten </title>
</head>
<style type = "text/css">
#dnavbar {
Hintergrundfarbe: #ffffff;
}
#dnavbar li {
Typ-Typ-Typ: Keine;
float: links;
Breite: 84px;
Höhe: 28px;
Zeilenhöhe: 28px;
Schriftgröße: 12px;
Farbe: #ffffff;
Grenze: 1PX Solid #ffffff;
Hintergrund:#86c2ff;
Text-Align: Mitte;
Anzeige: Block;
Cursor: Zeiger;
}
#submenu {
Hintergrund:#99cc66;
Breite: 500px;
Border-Links: 1PX Solid #ffffff;
Grenzrechte: 1PX Solid #ffffff;
Höhe: 29px;
Zeilenhöhe: 29px;
Farbe: #ffffff;
Schriftgröße: 12px;
Padding-Links: 10px;
}
Körper {
Rand: 0px;
}
A: Link, a: besucht {
Farbe: #ffffff;
Textdekoration: Keine;
}
A: Hover {
Farbe: #ffffff;
Textdekoration: Keine;
}
</style>
<script Language = "JavaScript">
Funktionshowmenu ()
{
var buntt = document.getElementByIdx_x ("dnavbar")
var liarr = bunt.getElementsByTagname_r ("li")
var links = new Array ()
Links [0] = "<a href = '#'> aktueller Ort: Homepage"
Links [1] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a> | <a href = '#'> Projekt 3 </a> | <a href = '#'> Projekt 4 </a>"
Links [2] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a> | <a href = '#'> Projekt 3 </a>"
Links [3] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a> | <a href = '#'> Projekt 3 </a> | <a href = '#'> Projekt 4 </a> | <a href = '#'> project 5 </a>"
Links [4] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
Links [5] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a> | <a href = '#'> Projekt 3 </a>"
Links [6] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
Links [7] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
Links [8] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
Links [9] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
Links [10] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
Links [11] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
Links [12] = "<a href = '#'> Projekt 1 </a> | <a href = '#'> Projekt 2 </a>"
für (i = 0; i <liarr.length; i ++)
{
liarr [i] .onclick = function ())
{
Wählen Sie diese (dies, Liarr, Links)
}
}
}
Funktion Selectthis (IndexObj, Allli, Infoarr)
{
var index = 0;
für (i = 0; i <Allli.length; i ++)
{
Allli [i] .style.border = "1px solide #ffffff";
Allli [i] .style.backgroundcolor = "#86c2ff";
Allli [i] .Style.Height = "28px";
if (indexobj == Allli [i])
{
index = i;
}
}
indexobj.style.borderbottom = "0px solide #666688";
Indexobj.Style.BackgroundColor = "#99CC66";
indexobj.style.height = "31px";
document.getElementByIdx_x ("submenu"). Innerhtml = infoarr [index];
}
</script>
<body onload = "showMenu ()">
<div id = "dnavbar" style = "float: keine; width: 560px;"> <li> Home </li> <li> Unterhaltungsausdruck </li> <li> Musikwelt </li> <li> Flash </li>
</div>
<div id = "submenu"> Site -Angelegenheiten Ankündigung </div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.