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

时间：2021-01-16 12:31:33|栏目：JavaScript代码|点击：次

记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于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生成的动态下雨背景效果实现方法

栏目：JavaScript代码

下一篇：js实现input密码框显示/隐藏功能

本文标题：两种简单实现菜单高亮显示的JS类代码

本文地址：http://www.codeinn.net/misctech/46157.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程