页面搜索 js html 高亮 定位,js实现不同页面导航菜单高亮显示

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

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

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

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

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

HTML代码：

• 首页
• 最新动态
• 关于我们

js代码：

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’); }

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