南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

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://www.12sui.cn/">首页</a></li><li><a href="http://www.12sui.cn/2">第二页</a></li><li><a href="http://www.12sui.cn/3">第三页</a></li></ul>
</div>

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

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

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

继续阅读 »