c语言 菜单左右切换,js实现多选项切换导航菜单的方法

本文实例讲述了js实现多选项切换导航菜单的方法。分享给大家供大家参考。具体实现方法如下：

多选项切换导航菜单

#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;

}

function ShowMenu()

{

var barCTT=document.getElementByIdx_x("dNavBar")

var liArr=barCTT.getElementsByTagName_r("li")

var links=new Array()

links[0]="当前位置：首页"

links[1]="项目一 | 项目二 | 项目三 | 项目四"

links[2]="项目一 | 项目二 | 项目三"

links[3]="项目一 | 项目二 | 项目三 | 项目四 | 项目五"

links[4]="项目一 | 项目二"

links[5]="项目一 | 项目二 | 项目三"

links[6]="项目一 | 项目二"

links[7]="项目一 | 项目二"

links[8]="项目一 | 项目二"

links[9]="项目一 | 项目二"

links[10]="项目一| 项目二"

links[11]="项目一 | 项目二"

links[12]="项目一 | 项目二"

for (i=0;i

{

liArr[i].οnclick=function()

{

selectThis(this,liArr,links)

}

}

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0;

for (i=0;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];

}

首页娱乐快报音乐天地极品FLASH

站务公告

希望本文所述对大家的javascript程序设计有所帮助。