两种简单实现菜单高亮显示的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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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邮件发送,php发送邮件的类
2011/03/24 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
微信小程序自定义组件
2017/08/16 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
微信小程序实现时间戳格式转换
2020/07/20 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
python语言是免费还是收费的?
2020/06/15 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
复古服装:RetroStage
2019/05/10 全球购物
《争吵》教学反思
2014/02/15 职场文书
企业活动策划方案
2014/06/02 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
七一活动主持词
2015/06/29 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle