JS实现选中当前菜单后高亮显示的导航条效果


Posted in Javascript onOctober 15, 2015

本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果。分享给大家供大家参考。具体如下:

这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好。

运行效果截图如下:

JS实现选中当前菜单后高亮显示的导航条效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选中当前菜单后高亮</title>
<style type="text/css">
<!--
.nav {
  MARGIN: 1px 0; 
  WIDTH: 100%; 
  FONT-FAMILY: verdana; 
  HEIGHT: 21px; 
  BACKGROUND-COLOR: #970B0B;
  font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}
.nav UL {
  PADDING: 0px; 
  DISPLAY: block; 
  MARGIN: 0px; 
  LIST-STYLE-TYPE: none; 
  HEIGHT: 21px; 
  BACKGROUND-COLOR: #970B0B;
  COLOR: #ffffff; 
}
.nav LI {
  BORDER-RIGHT: #ffffff 1px solid; 
  DISPLAY: block; 
  FLOAT: left; 
  HEIGHT: 21px;
  font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}
.nav LI A {
  PADDING:1px 15px 0; 
  DISPLAY: block; 
  FONT-WEIGHT: none; 
  COLOR: #ffffff; 
  LINE-HEIGHT: 20px; 
  TEXT-DECORATION: none;
}
.nav LI A:hover {
  COLOR:#562505; 
  BACKGROUND-COLOR: #f4f524; 
  TEXT-DECORATION: none;
}
.current{
 color:#ffffff;
 background:#D42524;
}
.nav li#date{
 color:#ffffff;
 PADDING:2px 15px 0; 
}
-->
</style>
<script language="javascript" type="text/javascript">
var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};
Array.prototype.each=function(func){
for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};
};
document .getElementsByClassName=function(cn){
var hasClass=function(w,Name){
var hasClass = false;
w.className.split(' ').each(function(s){
if (s == Name) hasClass = true;
});
return hasClass;
}; 
var elems =document.getElementsByTagName("*")||document.all;
   var elemList = [];
   $c(elems).each(function(e){
if(hasClass(e,cn)){elemList.push(e);}
   })
  return $c(elemList);
};
function change_bg(obj){
var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for(var i=0;i<a.length;i++){a[i].className="";}
obj.className="current";
}
</script>
</head>
<body>
<DIV class="nav">
 <UL>
 <LI><A href="#" onclick="change_bg(this)">脚本首页</A></LI>
 <LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI>
 <LI><a href="#" class="current" onclick="change_bg(this)">精品脚本</a> </LI>
 <LI><A href="#" onclick="change_bg(this)">ASP代码</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">PHP代码</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">JSP代码</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">脚本资源</A> </LI>
 <LI><A href="#" onclick="change_bg(this)">软件下载</A> </LI>
 </UL>
</DIV>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 #Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 #Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 #Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 #Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 #Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 #Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 #Javascript
You might like
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python读写二进制文件的方法
2015/05/09 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python对json的相关操作实例详解
2017/01/04 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python字典的遍历3种方法详解
2019/08/10 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Pycharm github配置实现过程图解
2020/10/13 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
python 实现音频叠加的示例
2020/10/29 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
学生请假条
2014/04/11 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
同意离婚答辩状
2015/05/22 职场文书
红色革命电影观后感
2015/06/18 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技