南芝 – 我才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() 获得更精确的定位。

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

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

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

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].href.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";
    }
}

这段代码就可以解决我们的问题了，优点是实用性较高，但是代码有些复杂。

标签： JavaScript, split(), 高亮

这篇文章发布于 2008年08月20日，星期三，17:51，归类于 JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。