这段时间在做一个网站的导航，需要用到不同页面的高亮效果，搜索了网上的一些信息，用js实现了需要的效果，现在整理一下跟大家分享了。

当然，我们在做导航的时候，都是由程序直接输出当前的页面的高亮状态的样式，我们只需要定义好输出的类的高亮的样式就可以了，这样是最直接有效也是最常用的方法。

但有时候，我们在程序里进行包含的文件的时候，如统一的头部和底部，这时候统一的头部中有一个这样的导航，如果没有给目前所在的目录或文件输出一个高亮的类的时候，或者实现起来非常麻烦的时候，我们就可以用JS来实现导航的高亮。

下面是具体的思路：先找到当前的URL的路径，然后URL中的最后的一个文件名或目录和导航中元素的某个属性来进行匹配，匹配成功的就加上高亮的类，把别的不是当前匹配的类的高亮样式去掉，不成功的时候就返回到首页这个来进行高亮。

下面的代码，文件或是目录都可以匹配成功：

HTML代码：

<ul class=”menu” id=”menu”>
<li><a title=”首页” href=”index.html” rel=”index.html”>首页</a></li>
<li ><a title=”最新动态” href=”news.html” rel=”news.html”>最新动态</a></li>
<li><a title=”关于我们” href=”about.html” rel=”about.html”>关于我们</a></li>
</ul>

js代码：

<script type=”text/javascript”>
var urlstr = location.href;
var urlstatus=false;
$(“#menu a”).each(function () {
if ((urlstr + ‘/’).indexOf($(this).attr(‘rel’)) > -1&&$(this).attr(‘rel’)!=”) {
$(this).addClass(‘cur’); urlstatus = true;
} else {
$(this).removeClass(‘cur’);
}
});
if (!urlstatus) {$(“#menu a”).eq(0).addClass(‘cur’); }
</script>

最后要注意一点，该脚本是基于Jquery的，我们应该在页面中引入jquery类库文件。