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 相关文章推荐
自写的一个jQuery圆角插件
Oct 26 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
vue cli 全面解析
Feb 28 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
图书管理程序(一)
2006/10/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
小学美术教学反思
2014/02/01 职场文书
自我鉴定书
2014/03/24 职场文书
大学生求职计划书
2014/04/30 职场文书
毕业生见习报告总结
2014/11/08 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书