两种简单实现菜单高亮显示的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 相关文章推荐
jquery tab插件制作实现代码
Jun 22 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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 array_reverse() 函数原理及实例解析
2020/07/14 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
表单验证正则表达式实例代码详解
2015/11/09 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python迭代和迭代器详解
2016/11/10 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
Keras 使用 Lambda层详解
2020/06/10 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
招聘专员岗位职责
2014/03/07 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
安全负责人任命书
2014/06/06 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
活动新闻稿范文
2015/07/17 职场文书
新学期主题班会
2015/08/17 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技