两种简单实现菜单高亮显示的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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
JS实现复制功能
Mar 01 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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程序?
2006/12/08 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
VUE重点问题总结
2018/03/19 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
处理Python中的URLError异常的方法
2015/04/30 Python
详解Django中Request对象的相关用法
2015/07/17 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python 判断网络连通的实现方法
2018/04/22 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
经典婚礼主持词
2014/03/13 职场文书
项目负责人任命书
2014/06/04 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
二十年同学聚会感言
2015/07/30 职场文书
学生会干部任命书
2015/09/21 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
PyMongo 查询数据的实现
2021/06/28 Python