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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
JS+DIV实现拖动效果
Feb 11 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
Smarty模板常见的简单应用分析
2016/11/15 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
javascript实现留言板功能
2020/02/08 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python中的self用法详解
2019/08/06 Python
flask实现验证码并验证功能
2019/12/05 Python
python多线程使用方法实例详解
2019/12/30 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
根叔历年演讲稿
2014/05/20 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
干部个人考察材料
2014/12/24 职场文书
转让协议书
2015/01/27 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
入党积极分子考察意见
2015/06/02 职场文书
安全教育主题班会教案
2015/08/12 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis