jQuery实现导航高亮的方法【附demo源码下载】


Posted in Javascript onNovember 09, 2016

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

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

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

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

jQuery实现导航高亮的方法【附demo源码下载】

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

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

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

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

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

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

THML:

<ul class="menu" id="menu">
 <li><a title="首页" href="index.html" rel="index.html">首页</a></li>
 <li ><a title="作品集" href="works.html" rel="works.html">作品集</a></li>
 <li><a title="前端库" href="web.html" rel="web.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程序设计有所帮助。

Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 #Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 #Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 #Javascript
给easyui datebox扩展一个清空的实例
Nov 09 #Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 #Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 #Javascript
jquery easyui validatebox remote的使用详解
Nov 09 #Javascript
You might like
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
php封装的smarty类完整实例
2016/10/19 PHP
js字符编码函数区别分析
2008/06/05 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
vue中appear的用法
2017/08/17 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
整理Python最基本的操作字典的方法
2015/04/24 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python实现五子棋小程序
2019/06/18 Python
解决pip install psycopg2出错问题
2020/07/09 Python
python 常见的反爬虫策略
2020/09/27 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
党员年终民主评议的自我评价
2013/11/05 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
创优争先心得体会
2014/09/11 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
介绍长城的导游词
2015/01/30 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书