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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
javascript编程起步(第六课)
Jan 10 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php自动加载方式集合
2016/04/04 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
Python实现二维有序数组查找的方法
2016/04/27 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python内置异常类型全面汇总
2020/05/28 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
函授本科个人自我鉴定
2014/03/25 职场文书
小学教师寄语大全
2014/04/03 职场文书
机关保密工作承诺书
2015/05/04 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS