Posted in Javascript onFebruary 06, 2015
本文实例讲述了js实现多选项切换导航菜单的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>多选项切换导航菜单</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">站务公告</div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
js实现多选项切换导航菜单的方法
- Author -
飞雪声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@