jQuery实现导航高亮的方法【附demo源码下载】(js设置导航固定)

编辑：rootadmin

推荐整理分享jQuery实现导航高亮的方法【附demo源码下载】(js设置导航固定)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js设置导航固定,jquery实现导航栏,jquery 导航,jquery制作左导航特效,javascript导航栏,jq导航栏显示内容,jquery实现导航栏,jquery实现导航栏,内容如对您有帮助，希望把文章链接给更多的朋友！

本文实例讲述了jQuery实现导航高亮的方法。分享给大家供大家参考，具体如下：

导航是我们页面中一般都需要的一个元素，它可以说是一个站点必用的元素，没有了导航，会让人找不着北，但有时候，仅仅有了导航还不够，还需要在当前的页面中标明当前是在哪一个类别里面，这时候就有了不同的实现的方法，也就有了下文的一些介绍。

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

像Wordpress的导航输出，会自动输出一个高亮的类的“current”，如下图：

但有时候，我们在程序里进行包含的文件的时候，如统一的头部和底部，这时候统一的头部中有一个这样的导航，如果粗心的程序员没有无法给目前所在的目录或文件输出一个高亮的类的时候，或者有时候实现起来非常麻烦的时候，能不能有一些其实的方法来实现和补救呢？

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

但这个根据怎样的规则给当前的这个目录或文件实现高亮呢？

最近刚好也在项目中遇到这个问题，所以通过一番的折腾，实现了效果。

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

于是就有了下面的代码，经试验，无论是文件或是目录都可匹配成功：

THML：

js代码：

不要忘了，该脚本是基于Jquery的。

完整实例代码点击此处本站下载。

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

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

jQuery EasyUI中的日期控件DateBox修改方法 jQueryEasyUI中的日期控件DateBox很好用的，首先需要引入jquery文件，代码如下：!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"titleBasicDateBox-jQueryEasyUIDemo/titlelinkrel="stylesheet"t

easyui datagrid 大数据加载效率慢,优化解决方法(推荐) 在使用easyuidatagrid途中发现加载数据的效率真的不是一般的差。经测试IE8加载条数据就感觉明显的慢了，加载条数据就另人崩溃用时差不多秒，就

浅谈EasyUI常用控件的禁用方法如下所示：input和textarea：$('#controlid').prop('disabled',true);$('input:not(:button,:hidden)').prop('disabled',true);//禁用除button和hidden控件外的所有input控件$('textarea').prop(

标签: js设置导航固定

本文链接地址:https://www.jiuchutong.com/biancheng/377794.html 转载请保留说明！

上一篇：jquery获取easyui日期控件的值实现方法(jquery easy ui)

下一篇：jQuery EasyUI中的日期控件DateBox修改方法(jquery easyui插件)