两种简单实现菜单高亮显示的JS类
摘要：近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高...
近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于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; } } } 【两种简单实现菜单高亮显示的JS类】相关文章：
上一篇：
“高效”是首要的设计要求
相关阅读
网友关注
网友最新关注视频
精品推荐
分类导航
网页设计子分类
最新交互设计教程学习
|