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 相关文章推荐
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
vue el-table实现行内编辑功能
Dec 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
PHP下对字符串的递增运算代码
2010/08/21 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python编程中的文件操作攻略
2015/10/16 Python
tensorflow获取变量维度信息
2018/03/10 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
详解python 注释、变量、类型
2018/08/10 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
询价采购方案
2014/06/09 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
五好家庭申报材料
2014/12/20 职场文书
孟佩杰观后感
2015/06/17 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫