两种简单实现菜单高亮显示的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 ;   
     }
     }
}

参数说明:

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页面和下载地址,需要的朋友可以查看或下载.
点此查看DEMO 点此下载DEMO

 

原文发布于Mr.Think的个人博客: http://mrthink.net/javascript-highlight-menu-twoway/

转载于:https://www.cnblogs.com/mrthink/archive/2010/06/26/1765695.html