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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
JS画5角星方法介绍
Sep 17 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Python单链表的简单实现方法
2014/09/23 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python装饰器用法与知识点小结
2020/03/09 Python
django queryset相加和筛选教程
2020/05/18 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
名企HR怎样看待求职信
2014/02/23 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android