js實現(xiàn)多選項切換導(dǎo)航菜單的方法

更新時間：2015年02月06日 11:23:26 作者：飛雪

這篇文章主要介紹了js實現(xiàn)多選項切換導(dǎo)航菜單的方法,可實現(xiàn)動態(tài)生成多選項切換導(dǎo)航菜單的功能,是非常實用的技巧,需要的朋友可以參考下

本文實例講述了js實現(xiàn)多選項切換導(dǎo)航菜單的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>多選項切換導(dǎo)航菜單</title>

</head>

<style type="text/css">

#dNavBar{

background-color:#ffffff;

}

#dNavBar li{

list-style-type:none;

float:left;

width:84px;

height:28px;

line-height:28px;

font-size:12px;

color:#FFFFFF;

border:1px solid #ffffff;

background:#86C2FF;

text-align:center;

display:block;

cursor:pointer;

}

#subMenu{

background:#99cc66;

width:500px;

border-left:1px solid #ffffff;

border-right:1px solid #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>

<script language="javascript">

function ShowMenu()

{

var barCTT=document.getElementByIdx_x("dNavBar")

var liArr=barCTT.getElementsByTagName_r("li")

var links=new Array()

links[0]="<a href='#'>當前位置：首頁"

links[1]="<a href='#'>項目一</a> | <a href='#'>項目二</a> | <a href='#'>項目三</a> | <a href='#'>項目四</a>"

links[2]="<a href='#'>項目一</a> | <a href='#'>項目二</a> | <a href='#'>項目三</a>"

links[3]="<a href='#'>項目一</a> | <a href='#'>項目二</a> | <a href='#'>項目三</a> | <a href='#'>項目四</a> | <a href='#'>項目五</a>"

links[4]="<a href='#'>項目一</a> | <a href='#'>項目二</a>"

links[5]="<a href='#'>項目一</a> | <a href='#'>項目二</a> | <a href='#'>項目三</a>"

links[6]="<a href='#'>項目一</a> | <a href='#'>項目二</a>"

links[7]="<a href='#'>項目一</a> | <a href='#'>項目二</a>"

links[8]="<a href='#'>項目一</a> | <a href='#'>項目二</a>"

links[9]="<a href='#'>項目一</a> | <a href='#'>項目二</a>"

links[10]="<a href='#'>項目一</a>| <a href='#'>項目二</a>"

links[11]="<a href='#'>項目一</a> | <a href='#'>項目二</a>"

links[12]="<a href='#'>項目一</a> | <a href='#'>項目二</a>"

for (i=0;i<liArr.length;i++)

{

liArr[i].onclick=function()

{

selectThis(this,liArr,links)

}

}

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0;

for (i=0;i<allLi.length;i++)

{

allLi[i].style.border="1px solid #ffffff";

allLi[i].style.backgroundColor="#86C2FF";

allLi[i].style.height="28px";

if (indexObj==allLi[i])

{

index=i;

}

}

indexObj.style.borderBottom="0px solid #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:none; width:560px;"><li>首頁</li><li>娛樂快報</li><li>音樂天地</li><li>極品FLASH</li>

</div>

<div id="subMenu">站務(wù)公告</div>

</body>

</html>