js实现多选项切换导航菜单的方法
本文实例讲述了js实现多选项切换导航菜单的方法。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>多选项切换导航菜单</title>
</head>
<styletype="text/css">
#dNavBar{
background-color:#ffffff;
}
#dNavBarli{
list-style-type:none;
float:left;
width:84px;
height:28px;
line-height:28px;
font-size:12px;
color:#FFFFFF;
border:1pxsolid#ffffff;
background:#86C2FF;
text-align:center;
display:block;
cursor:pointer;
}
#subMenu{
background:#99cc66;
width:500px;
border-left:1pxsolid#ffffff;
border-right:1pxsolid#ffffff;
height:29px;
line-height:29px;
color:#FFFFFF;
font-size:12px;
padding-left:10px;
}
body{
margin:0px;
}
a:link,a:visited{
color:#FFFFFF;
text-decoration:none;
}
a:hover{
color:#FFFFFF;
text-decoration:none;
}
</style>
<scriptlanguage="javascript">
functionShowMenu()
{
varbarCTT=document.getElementByIdx_x("dNavBar")
varliArr=barCTT.getElementsByTagName_r("li")
varlinks=newArray()
links[0]="<ahref='#'>当前位置：首页"
links[1]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>|<ahref='#'>项目三</a>|<ahref='#'>项目四</a>"
links[2]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>|<ahref='#'>项目三</a>"
links[3]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>|<ahref='#'>项目三</a>|<ahref='#'>项目四</a>|<ahref='#'>项目五</a>"
links[4]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
links[5]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>|<ahref='#'>项目三</a>"
links[6]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
links[7]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
links[8]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
links[9]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
links[10]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
links[11]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
links[12]="<ahref='#'>项目一</a>|<ahref='#'>项目二</a>"
for(i=0;i<liArr.length;i++)
{
liArr[i].onclick=function()
{
selectThis(this,liArr,links)
}
}
}
functionselectThis(indexObj,allLi,infoArr)
{
varindex=0;
for(i=0;i<allLi.length;i++)
{
allLi[i].style.border="1pxsolid#ffffff";
allLi[i].style.backgroundColor="#86C2FF";
allLi[i].style.height="28px";
if(indexObj==allLi[i])
{
index=i;
}
}
indexObj.style.borderBottom="0pxsolid#666688";
indexObj.style.backgroundColor="#99cc66";
indexObj.style.height="31px";
document.getElementByIdx_x("subMenu").innerHTML=infoArr[index];
}
</script>
<bodyonLoad="ShowMenu()">
<divid="dNavBar"style="float:none;width:560px;"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>
</div>
<divid="subMenu">站务公告</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。