js实现多选项切换导航菜单的方法

 更新时间:2015年02月06日 11:23:26   作者:飞雪   我要评论
这篇文章主要介绍了js实现多选项切换导航菜单的方法,可实现动态生成多选项切换导航菜单的功能,是非常实用的技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • 清除div下面的所有标签的方法

    清除div下面的所有标签的方法

    清除标签的方法有很多,下面有个不错的示例可以清楚div下面的所有标签,需要的朋友可以参考下
    2014-02-02
  • JavaScript使用HTML5的window.postMessage实现跨域通信例子

    JavaScript使用HTML5的window.postMessage实现跨域通信例子

    这篇文章主要介绍了JavaScript使用HTML5的window.postMessage实现跨域通信例子,需要的朋友可以参考下
    2014-04-04
  • ionic实现可滑动的tab选项卡切换效果

    ionic实现可滑动的tab选项卡切换效果

    这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 判断浏览器的javascript版本的代码

    判断浏览器的javascript版本的代码

    话说最近在研究某著名跟踪系统,在其给用户的实施代码中有一段判断浏览器Javascript版本的代码引起了我的注意,于是问了下google如何判断浏览器的javascript版本
    2010-09-09
  • IE 下的只读 innerHTML

    IE 下的只读 innerHTML

    可以先使用 DOM 的 createElement 方法创建 tr 和 td,然后对 td 的 innerHTML 进行相应操作,最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。
    2009-08-08
  • 七个很有意思的PHP函数

    七个很有意思的PHP函数

    这篇文章主要介绍了七个很有意思的PHP函数,这些函数鲜为人知,但很实用,需要的朋友可以参考下
    2014-05-05
  • Display SQL Server Login Mode

    Display SQL Server Login Mode

    Display SQL Server Login Mode...
    2007-06-06
  • innerText和innerHTML 一些问题分析

    innerText和innerHTML 一些问题分析

    尽管DOM带来了动态修改文档的能力,但对开发人员来说,这还不够。IE4.0为所有的元素引入了两个特性,以更方便的进行文档操作,这两个特性是innerText和innerHTML。
    2009-05-05
  • js二维数组定义和初始化的三种方法总结

    js二维数组定义和初始化的三种方法总结

    本篇文章主要是对js二维数组定义和初始化的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • Bootstrap实现默认导航栏效果

    Bootstrap实现默认导航栏效果

    这篇文章主要介绍了Bootstrap实现默认导航栏效果,导航栏是一个很好的功能,是Bootstrap网站的一个突出特点,本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下
    2015-12-12

最新评论