两种简单实现菜单高亮显示的JS类(转载)
2021-07-09 22:07
标签：post 实现 类型 his elements http dex think 方法 近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式. 第一种判断当前URL值高亮类代码: 参数说明: 调用方法: 第二种点击后高亮显示当前类: 参数说明: 调用方法: 此方法扩展性较强,比如可以通过判断parentNode.nodeName值来使某一类型链接不被遍历,等等. 两种简单实现菜单高亮显示的JS类(转载) 标签：post 实现 类型 his elements http dex think 方法 原文地址：http://www.cnblogs.com/qixin622/p/7092016.html
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
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur;
}
}
}
2.classCur : 高亮显示时的样式class名.
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[i].onclick = function() {
for (n = 0; n links[n].className = "";
this.className = classCur;
this.blur();
}
}
}
}
2.classCur : 点击后显示的样式class名.
下一篇：php学习过程笔记