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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
简单理解Python中的装饰器
2015/07/31 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
如何学习Python time模块
2020/06/03 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
大学生安全责任书
2014/07/25 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
暑假安全保证书
2015/02/28 职场文书
公司出纳岗位职责
2015/03/31 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL