Cet article décrit la méthode d'implémentation du menu de navigation de commutation multi-option par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<html>
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
<Title> Menu de navigation à bascule de plusieurs options </TITME>
</ head>
<style type = "text / css">
#dnavbar {
Color d'arrière-plan: #FFFFFF;
}
#dnavbar li {
Type de style liste: aucun;
flottant: à gauche;
Largeur: 84px;
hauteur: 28px;
hauteur de ligne: 28px;
taille de police: 12px;
Couleur: #ffffff;
Border: 1px solide #ffffff;
Contexte: # 86C2FF;
Texte-aligne: Centre;
Affichage: bloc;
curseur: pointeur;
}
#SubMenu {
Contexte: # 99cc66;
Largeur: 500px;
Border-Left: 1px solide #ffffff;
Border-droite: 1px solide #ffffff;
hauteur: 29px;
hauteur de ligne: 29px;
Couleur: #ffffff;
taille de police: 12px;
padding-gauche: 10px;
}
corps {
marge: 0px;
}
a: lien, a: visité {
Couleur: #ffffff;
Décoration du texte: aucune;
}
A: Hover {
Couleur: #ffffff;
Décoration du texte: aucune;
}
</ style>
<script linguisse = "javascript">
fonction showmenu ()
{
var barctt = document.getElementByidx_x ("dnavbar")
var liarr = barctt.getElementsByTagName_r ("li")
var links = new Array ()
liens [0] = "<a href = '#'> Emplacement actuel: page d'accueil"
liens [1] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a> | <a href = '#'> Projet 3 </a> | <a href = '#'> Projet 4 </a>"
liens [2] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a> | <a href = '#'> Projet 3 </a>"
liens [3] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a> | <a href = '#'> Projet 3 </a> | <a href = '#'> Projet 4 </a> | <a href = '#'> Projet 5 </a>"
liens [4] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
liens [5] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a> | <a href = '#'> Projet 3 </a>"
liens [6] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
liens [7] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
liens [8] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
liens [9] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
liens [10] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
liens [11] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
liens [12] = "<a href = '#'> Projet 1 </a> | <a href = '#'> Projet 2 </a>"
pour (i = 0; i <liarr.length; i ++)
{
liarr [i] .onclick = function ()
{
select This (this, liarr, liens)
}
}
}
Fonction Select This (indexObj, allli, infoarr)
{
var index = 0;
pour (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];
}
</cript>
<body onload = "showmenu ()">
<div id = "dnavbar" style = "float: Aucun; largeur: 560px;"> <li> Accueil </li> <li> Entertainment Express </li> <li> Monde de musique </li> <li> Flash </li>
</div>
<div id = "SubMenu"> Annonce des affaires du site </div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.