两种简单实现菜单高亮显示的JS类代码


Posted in Javascript onJune 27, 2010

记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类.

其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式.

第一种判断当前URL值高亮类代码:

//@Mr.Think---判断URL实现菜单高亮显示 
function highURL(menuId,classCur){ 
if(!document.getElementById) return false; 
if(!document.getElementById(menuId)) return false; 
if(!document.getElementsByTagName) return false; 
var menuId=document.getElementById(menuId); 
var links=menuId.getElementsByTagName("a"); 
for(var i=0; i<links.length; i++ ){ 
var menuLink=links[i].href; 
var currentLink=window.location.href; 
if(currentLink.indexOf(menuLink)!=-1){ 
links[i].className=classCur; 
} 
} 
}

参数说明:

1.menuId : 链接组所在ID;
2.classCur : 高亮显示时的样式class名.
调用方法:

window.onload=function highThis(){highURL("youId","youhighclass");}
第二种点击后高亮显示当前类:

//@Mr.Think---点击实现高亮显示 
function highOnclick(elemId,classCur) { 
if (!document.getElementsByTagName) return false; 
if (!document.getElementById) return false; 
if (!document.getElementById(elemId)) return false; 
var elemId = document.getElementById(elemId); 
var links = elemId.getElementsByTagName("a"); 
for (i = 0; i < links.length; i++) { 
links[i].onclick = function() { 
for (n = 0; n < links.length; n++) { 
links[n].className = ""; 
this.className = classCur; 
this.blur(); 
} 
} 
} 
}

参数说明:

1.elemId : 链接组所在ID;
2.classCur : 点击后显示的样式class名.
调用方法:

window.onload=function highThis(){highOnclick("youId","youhighclass");}
此方法扩展性较强,比如可以通过判断parentNode.nodeName值来使某一类型链接不被遍历,等等.
源码下载及演示
鉴于有朋友不知道如何使用,我特地整理了一下我之前写的与这个类有关的页面,给一个DEMO页面和下载地址,需要的朋友可以查看或下载.

打包下载地址

Javascript 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
微信JSSDK上传图片
Aug 23 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
关于vue-router的那些事儿
May 23 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 #Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 #Javascript
jQuery选择头像并实时显示的代码
Jun 27 #Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 #Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 #Javascript
让IE6支持min-width和max-width的方法
Jun 25 #Javascript
jQuery与其它库冲突的解决方法
Jun 25 #Javascript
You might like
PHP 日,周,月点击排行统计
2012/01/11 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery操作cookie
2016/08/08 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
python中xrange和range的区别
2014/05/13 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
彻底理解Python list切片原理
2017/10/27 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
《月亮湾》教学反思
2014/04/14 职场文书
教师求职信
2014/06/17 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
学校运动会简讯
2015/07/20 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL