本文介绍了两种在Web前端实现菜单当前项高亮显示的JavaScript类封装方法。第一种通过遍历链接并比对URL包含关系实现，适用于常规页面；第二种通过绑定点击事件动态切换样式，适用范围更广且具备扩展性。文章提供了完整的代码示例、参数说明及调用方式，帮助开发者快速集成菜单高亮功能。
引言与方案概述
在早期制作静态网页时，为了区分当前页面，通常需要在每个页面单独添加不同的样式。高亮显示是当前Web前端开发中非常常见且实用的效果。鉴于近期再次遇到此类需求，特此整理并分享两种个人编写的菜单高亮类实现方案。
这两种方法的实现思路均较为直观。第一种方法通过遍历菜单链接组的href属性，利用indexOf判断当前浏览器URL是否包含该链接地址。需要注意的是，此方法存在一定局限性，例如无法直接处理iframe内部菜单的高亮判断。第二种方法适用范围更广，其核心思路是通过监听点击事件，为被点击的菜单项动态加载高亮样式。
基于URL匹配的高亮类实现
第一种方案：基于当前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：定义高亮状态下的CSS类名。
调用方法示例：
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：定义点击后显示高亮的CSS类名。
调用方法示例：
window.onload=function highThis(){highOnclick("youId","youhighclass");}
该方法具有较强的扩展性，例如可以通过判断parentNode.nodeName值来排除特定类型的链接不被遍历，从而满足更复杂的业务需求。
源码与演示资源
源码下载及演示地址
考虑到部分用户可能不清楚具体使用方法，此处整理了包含该类的相关页面示例。提供了DEMO演示页面及源码下载地址，有需要的朋友可自行查看或下载参考。
打包下载地址