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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
javascript使用call调用微信API
Dec 15 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 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通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
python控制台中实现进度条功能
2015/11/10 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
Java里面有没有全局变量?为什么?
2015/02/06 面试题
电大毕业生自我鉴定
2014/04/10 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
话题作文之自信作文
2019/11/15 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
JUnit5常用注解的使用
2021/07/02 Java/Android