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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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 二维数组时间排序实现代码
2016/11/19 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python的pycurl包用法简介
2015/11/13 Python
Flask数据库迁移简单介绍
2017/10/24 Python
PyQt5实现简单的计算器
2020/05/30 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
学期自我鉴定范文
2013/10/01 职场文书
西式婚礼证婚词
2014/01/12 职场文书
房地产推广策划方案
2014/05/19 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang