很多朋友在做网站的时候可能遇到这样一个问题，如何高亮导航当前页链接 
以育儿网新版导航条来举例
大家可以看到“首页”2个字做了高亮处理。 

<div id=”navi”>
        <ul>
            <li><a target=”_blank” title=”首页” href=”http://www.ci123.com/” class=”on” ><span>首页</span></a></li>
            <li><a target=”_blank” title=”父母学堂” href=”http://www.ci123.com/index1.html”><span>父母学堂</span></a></li>
            <li><a target=”_blank” title=”育儿论坛” href=”http://bbs.ci123.com”><span>育儿论坛</span></a></li>
            <li><a target=”_blank” title=”宝宝主页” href=”http://baobao.ci123.com”><span>宝宝主页</span></a></li>
            <li><a target=”_blank” title=”育儿博客” href=”http://blog.ci123.com”><span>育儿博客</span></a></li>
            <li><a target=”_blank” title=”育儿问答” href=”http://ask.ci123.com”><span>育儿问答</span></a></li>
            <li><a target=”_blank” title=”许愿树” href=”http://tree.ci123.com”><span>许愿树</span></a></li>
            <li><a target=”_blank” title=”亲子资源” href=”http://rs.ci123.com”><span>亲子资源</span></a></li>
            <li><a target=”_blank” title=”城市伙伴” href=”http://www.ci123.com/baodian”><span>育儿宝典</span></a></li>
            <li class=”end”><a target=”_blank” title=”活动吧” href=”http://www.ci123.com/huod-bar.html”><span>活动吧</span></a></li>
        </ul>
    </div> 

蓝色加下划线的地方，就是用来区别“首页”这个链接和其它链接的不同样式的class。

#navi li a.on,#navi li a:hover{
    background: url(images/navi.gif) top left no-repeat;
    color: Red;
}#navi li a.on  span,#navi li a:hover span{
    background: url(images/navi.gif);
        background-position: right 25px;
    padding-top: 2px;
}a 里面的 span 标签是为了实现滑动门效果的。具体可以看CSS滑动门技术这篇文章。下面继续。如果是单个页面，设置这样的效果只要按上面的方法，在需要高亮度链接标识出特定的class就可以了。但在大型网站中，因为频道和页面众多，如果每个频道的头部都为此单独去做一个只是高亮部位不同的文件，那维护起来必然是非常繁琐的。因此，我们将头部分离出来，放入服务器单独的目录，再让各个频道去引用这个单独的文件。这样在维护的时候，就可以一次修改。多次使用。具体引用的方式在不同的语言和架构上有不同的方法，这个和我们要说的东西又是另一回事。回到这里，如果是引用的同一个头部文件，那么就没有办法给每个链接区按一个class，那又如何按频道高亮呢。下面有个函数：function highlightPage(){
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById(‘navi’)) return false;
    var nav = document.getElementById(‘navi’);
    var links = nav.getElementsByTagName(‘a’);
    for (var i=0;i<links.length;i++){
        var linkurl =  links[i].getAttribute(‘href’);
        var currenturl = document.location.href;
            if(currenturl.indexOf(linkurl)!=-1){
                links[i].className = ’on’;
                return true;
            }
    }
}这个js的前三行，是用于判断dom上的节点是否能取到，以及浏览器对document.getElementsById方法的支持程度。 

到了第三行开始，建立了一个 nav的变量，并给它赋值document.getElementById(‘navi’)。 

navi是唯一的。而它下面的诸多a 标签，用links[]这个数组再进行赋值。 

赋值完成后，就开始遍历。一遍links的数组，每遍历一个数组成员，都用 links[i].getAttribute(‘href’) 将这个成员的’href’属性值取出，放入临时变量linkurl,同时用l将页面当前的地址也取出放入currenturl这个变量。 

如http://www.ci123.com/  因为基本网页的实际地址长度都会大于页面代码href的里面所写的路径，所以我们用indexOf这个方法来判断 currenturl 里面是否包含 linkurl的字符串，如果结果为true,我们就给这个链接的className赋值’on’ 设定它为当前链接。然后返回。 

这样开头的那个高亮效果就实现了。