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 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
在layui中select更改后生效的方法
Sep 05 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批量生成缩略图的代码
2008/07/19 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
smarty模板数学运算示例
2016/12/11 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
express默认日志组件morgan的方法
2018/04/05 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
Python连接DB2数据库
2016/08/27 Python
python K近邻算法的kd树实现
2018/09/06 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
python os.listdir()乱码解决方案
2021/01/31 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
小区门卫管理制度
2014/01/29 职场文书
企业办公室岗位职责
2014/03/12 职场文书
高级工程师英文求职信
2014/03/19 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
工会主席事迹材料
2014/06/03 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
开幕式邀请函
2015/01/31 职场文书
公司安全管理制度范本
2015/08/05 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
python基础之停用词过滤详解
2021/04/21 Python