在wordpress中，当用Category或Page当导航菜单的话，wordpress已经处理好当前li标签的class了，所以用wordpress的Category或Page当导航菜单不用作本文的处理。我在bbpress中，想把每个父版块做成导航菜单的时候碰到这个问题的。

Jeremy Keith 在《JavaScript DOM编程艺术》一书中为我们做了一个小的例子，例子中使用了一段简单的高亮当前位置的 js 代码，代码如下：

function highlightPage() {
       if (!document.getElementsByTagName) return false;
       if (!document.getElementById) return false;
       if (!document.getElementById("navigation")) return false;

       var nav = document.getElementById("navigation");
       var links = nav.getElementsByTagName("a");

       for (var i=0; i<Links.length; i++){
              var linkurl = links[i].getAttribute("href");
              var currenturl = window.location.href;
              if (currenturl.indexOf(linkurl) != -1) {
                    links[i].className = "here";
                    var linktext = links[i].lastChild.nodeValue.toLowerCase();
                    document.body.setAttribute("id",linktext);
              }
        }
}

原理很简单，就是首先获取当前的网址，然后遍历菜单栏，如果当前网址包含了菜单栏内的链接地址，就给这个链接的 class 定义为 here，从而达到高亮的效果。但是我在使用的过程中遇到了一些特殊情况，这段代码就不能满足我的要求了。

先看以下菜单栏：

<div id="menu">
   <ul>
      <li><a href="http://yoursite.net/">首页</a></li>
      <li><a href="http://yoursite.net/2">第二页</a></li>
      <li><a href="http://yoursite.net/3">第三页</a></li>
   </ul>
</div>

如果我是用了上述 js 代码，那么当我停留在第二页或者第三页的时候首页同时也会被高亮，这并不是我想要的结果，解决方法有二：

第一种方法，可以在首页的网址后边再加一个 index.php 或者其他的后缀，这样子就可以解决问题，优点是简单，缺点是无法解决更复杂的菜单，比如在一个使用了 URL 静态化的二级页面，这种方法将无法实施。

第二种方法，采用 split() 获得更精确的定位。

split() 方法用于把一个字符串分割成字符串数组，这里我们将网址通过“/”进行拆分，首先是拆分当前网址：

  
var windowLocation = window.location.href.split("/");

现在我们将网址拆分成一个数组，然后我们将获得网址最后的部分，但是需要注意的是，http://yoursite.net/ 和 http://yoursite.net 是两个不同的网址，如果我们漏掉了其中的一个，可能会导致我们的脚本无效，因此我们需要判断这个网址的末尾是否含有”/”。

JS 代码：

var windowLocation = window.location.href.split("/");
var locationLong = windowLocation.length;
var locationHref;

if(windowLocation[locationLong-1] == "") {
    locationHref = windowLocation[locationLong-2];
} else {
    locationHref = windowLocation[locationLong-1];
}

当当前的网址含有”/”也就是 windowLocation 的最后一个为”"的时候，我们就取倒数第二个值，否则我们就取倒数第一个值。取好当前网址的值后，同理我们也要这样子取一下菜单栏的地址：

var menu = document.getElementById("menu");
var menuLinks = menu.getElementsByTagName("a");

for(var i=0; i<menuLinks.length; i++){
     var linksHref = menuLinks[i].split("/");
     var linksLong = linksHref.length;
     var linksRighthref;

     if(linksHref[linksLong-1] == "") {
          linksRighthref = linksHref[linksLong-2];
     } else {
          linksRighthref = linksHref[linksLong-1];
     }
     //hight menu
    if(locationHref == linksRighthref) {
          menuLinks[i].className = "here";
     }
}

当然，如果页面还有存在页面翻页参数，如在同一个菜单下默认第一页链接是http://yoursite.net/,第二页链接是http://yoursite.net/?page=2,这样必须在后面的截取段进行进一步的if匹配判断，方法类似。
这样代码就可以解决我们的问题了，优点是实用性较高，但是代码有些复杂。

本文部分内容来自：http://blog.admin9.com/?p=888