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


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程序设计有所帮助。

Javascript 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 #Javascript
javascript强制点击广告的方法
Feb 06 #Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 #Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 #Javascript
触屏中的JavaScript事件分析
Feb 06 #Javascript
JavaScript事件委托技术实例分析
Feb 06 #Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 #Javascript
You might like
php广告加载类用法实例
2014/09/23 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
浅谈PHP中的
2016/04/23 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Django框架封装外部函数示例
2019/05/28 Python
python全栈知识点总结
2019/07/01 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
大学生求职推荐信
2013/11/27 职场文书
服装机修工岗位职责
2013/12/26 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
优质服务口号
2014/06/11 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
python随机打印成绩排名表
2021/06/23 Python