在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