这篇文章主要介绍了 js 实现多选项切换导航菜单的方法, 可实现动态生成多选项切换导航菜单的功能, 是非常实用的技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: