jQuery实现导航高亮的方法[带演示源代码下载]

本文阐述了用jQuery进行导航高亮显示的方法。分享给大家参考，如下：

导航是我们页面中通常需要的元素。它可以说是一个网站必不可少的元素。没有导航，人们就找不到北方。然而，有时候，仅仅有导航是不够的。还需要在当前页面中指出它当前属于哪个类别。此时有不同的实现方法，下面有一些介绍。

通常我们在做导航的时候，程序会直接输出当前页面的高亮样式。我们只需要定义输出类的高亮样式，这是最直接、最有效、最常用的方法。

像Wordpress的导航输出一样，高亮显示的类的“当前”会自动输出，如下图所示：

但是有时候，当我们在程序中执行包含的文件时，比如统一的头底，统一的头底中就有这样的导航。如果粗心的程序员不是不能输出一个高亮的类到当前的目录或者文件，或者有时候实现起来很麻烦，能不能有一些实用的方法来实现和补救？

答案是肯定的，那就是JS。

但是根据什么规则，我们应该突出显示当前的目录或文件？

最近在项目中也遇到了这个问题，所以通过一些折腾，才体会到了效果。

我的想法是这样的：首先找到当前URL的路径，然后将URL中的最后一个文件名或目录与导航中元素的属性进行匹配。如果匹配成功，则添加突出显示的类，并移除当前不匹配的其他类的突出显示样式。如果不成功，返回主页进行突出显示。

这样就有了下面的代码，通过实验，文件和目录都可以匹配成功：

THML:

ul class=' menu ' id=' menu ' Liatitle=' home page ' href=' index . html ' rel=' index . html ' home page/a/Li阿利title=' portfolio ' href=' works . html ' rel=' works . html ' portfolio/a/Liatitle='前端库' href='web.html' rel='web.html '前端库/a/li/uljs代码：

脚本类型=' text/JavaScript ' var URL str=location . href；var urlstatus=false$(' #菜单a ')。每个(函数(){ if ((urlstr '/')。indexOf($(this)。attr(' rel ')-1 $(这个)。attr('rel ')！='') { $(这个)。add CLaSS(' cur ')；urlstatus=true} else { $(this)。remove CLaSS(' cur ')；} });if(！urlstatus) {$('#menu a ')。eq(0)。add CLaSS(' cur ')；}/script别忘了，这个脚本是基于Jquery的。

单击此处下载完整的示例代码。

更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》。

希望本文对大家的jQuery程序设计有所帮助。