jQuery对底部导航进行跳转并高亮显示的实例代码


Posted in jQuery onApril 23, 2019

这两天弄一个mui的底部菜单,有点费时了,尝试了用vue写,纯js写,还有根据mui的写,还是有些问题和麻烦。直到看了网上的一些例子,才想明白,之前一直是一种点击触发事件才高亮的思维去做,这个虽然可以了,但是页面跳转了就又都没了。网上看明白的例子是:让当前页面地址与导航里的地址做对比,相同就高亮,之前思维太死,一直以点击才触发事件来写,结果问题好几个。接下来上代码

<style>
.active{ color:#D96C00;}/*高亮样式*/
</style>

这里就放菜单部分代码,在针对vue写菜单的时候,是把导航写到data,再循环遍历输出,最终由于购物车的数字角标显示问题而放弃,采用jQuery了

<nav class="mui-bar mui-bar-tab" id="menu">
  <a href="menuTest.html" rel="external nofollow" rel="menuTest.html" class="mui-tab-item"><!-- rel是作对比的-->
    <span class="fa fa-home"></span>
    <span class="mui-tab-label">首页</span>
  </a>
  <a href="service.html" rel="external nofollow" rel="service.html" class="mui-tab-item">
    <span class="mui-icon iconfont icon-shop"></span>
    <span class="mui-tab-label">客服</span>
  </a>
  <a href="shopcart.html" rel="external nofollow" rel="shopcart.html class="mui-tab-item">
    <span class="mui-icon iconfont icon-gouwuche"><span class="mui-badge">5</span></span>
    <span class="mui-tab-label">购物车</span>
  </a>
  <a href="me.html" rel="external nofollow" rel="me.html" class="mui-tab-item">
    <span class="fa fa-user-circle-o"></span>
    <span class="mui-tab-label">我的</span>
  </a>
</nav>

接下来是jQuery语句

var urlstr = location.href;
//获取浏览器的url
 var urlstatus=false;

 $('#menu a').each(function() {
   if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
      // 为当前点击的导航加上高亮,其余的移除高亮
      $(this).find('span').addClass('active');
      urlstatus = true;
    } else {
     $(this).removeClass('active');
    }
  });
 if (!urlstatus) {
   $("#menu a span").eq(0).addClass('active'); //默认首页图标高亮
 }

总结

以上所述是小编给大家介绍的jQuery对底部导航进行跳转并高亮显示的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现轮播图特效
Apr 12 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
详解jquery和vue对比
Apr 16 #jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解JQuery基础动画操作
Apr 12 #jQuery
详解jQuery设置内容和属性
Apr 11 #jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
jQuery中实现text()的方法
Apr 04 #jQuery
You might like
PHP测试成功的邮件发送案例
2015/10/26 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
js实现简单的随机点名器
2020/09/17 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python logging模块的使用
2020/09/07 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
数字天堂软件测试面试题
2012/12/23 面试题
一年级学生期末评语
2014/04/21 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL