Das Beispiel in diesem Artikel beschreibt die Methode zum Implementieren eines Navigationsmenüs zum Umschalten mehrerer Optionen in js. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt: Code kopieren Der Code lautet wie folgt: Navigationsmenü zum Wechseln mehrerer Optionen <br> #dNavBar{<br> Hintergrundfarbe:#ffffff;<br> }<br> #dNavBar li{<br> Listenstiltyp:none;<br> float:left;<br> Breite:84px;<br> Höhe:28px;<br> Zeilenhöhe:28px;<br> Schriftgröße:12px;<br> Farbe:#FFFFFF;<br> border:1px solid #ffffff;<br> Hintergrund:#86C2FF;<br> text-align:center;<br> display:block;<br> Cursor:Zeiger;<br> }<br> #subMenu{<br> Hintergrund:#99cc66;<br> Breite:500px;<br> border-left:1px solid #ffffff;<br> border-right:1px solide #ffffff;<br> Höhe:29px;<br> Zeilenhöhe:29px;<br> Farbe:#FFFFFF;<br> Schriftgröße:12px;<br> padding-left:10px;<br> }<br> Körper {<br> Rand: 0px;<br> }<br> a:link,a:besucht {<br> Farbe: #FFFFFF;<br> Textdekoration: keine;<br> }<br> a:hover{<br> Farbe: #FFFFFF;<br> Textdekoration: keine;<br> }<br> <br> Funktion ShowMenu()<br> {<br> var barCTT=document.getElementByIdx_x("dNavBar")<br> var liArr=barCTT.getElementsByTagName_r("li")<br> var links=new Array()<br> links[0]="<a href='#'>Aktueller Standort: Zuhause"<br> links[1]="<a href='#'>Element Eins</a> | <a href='#'>Element Zwei</a> | <a href='#' > Punkt 3</a> |. <a href='#'>Punkt 4</a>"<br> links[2]="<a href='#'>Element Eins</a> | <a href='#'>Element Zwei</a> | <a href='#' > Projekt 3</a>"<br> links[3]="<a href='#'>Element Eins</a> | <a href='#'>Element Zwei</a> | <a href='#' > Projekt drei</a> |. <a href='#'>Projekt vier</a>Projekt fünf</a>" links[4]="<a href='#'>Projekt Eins</a> | <a href='#'>Projekt Zwei</a>"<br> links[5]="<a href='#'>Element Eins</a> | <a href='#'>Element Zwei</a> | <a href='#' > Projekt 3</a>"<br> links[6]="<a href='#'>Projekt Eins</a> | <a href='#'>Projekt Zwei</a>"<br> links[7]="<a href='#'>Projekt Eins</a> | <a href='#'>Projekt Zwei</a>"<br> links[8]="<a href='#'>Projekt Eins</a> | <a href='#'>Projekt Zwei</a>"<br> links[9]="<a href='#'>Projekt Eins</a> | <a href='#'>Projekt Zwei</a>"<br> links[10]="<a href='#'>Projekt Eins</a>| <a href='#'>Projekt Zwei</a>"<br> links[11]="<a href='#'>Projekt Eins</a> | <a href='#'>Projekt Zwei</a>"<br> links[12]="<a href='#'>Projekt Eins</a> | <a href='#'>Projekt Zwei</a>"<br> für (i=0;i<liArr.length;i )<br /> {<br /> liArr[i].onclick=function()<br /> {<br /> selectThis(this,liArr,links)<br /> }<br /> }<br /> }<br /> Funktion selectThis(indexObj,allLi,infoArr)<br /> {<br /> var index=0;<br /> für (i=0;i<allLi.length;i )<br /> {<br /> allLi[i].style.border="1px solide #ffffff";<br /> allLi[i].style.backgroundColor="#86C2FF";<br /> allLi[i].style.height="28px";<br /> if (indexObj==allLi[i])<br /> {<br /> index=i;<br /> }<br /> }<br /> indexObj.style.borderBottom="0px solid #666688";<br /> indexObj.style.backgroundColor="#99cc66";<br /> indexObj.style.height="31px";<br /> document.getElementByIdx_x("subMenu").innerHTML=infoArr[index];<br /> }<br /> HomepageEntertainment ExpressMusic World< ;/li> ;Der ultimative FLASH Site-Ankündigung
