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

这两天弄一个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对底部导航进行跳转并高亮显示的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • jQuery动态添加.active 实现导航效果代码思路详解

    jQuery动态添加.active 实现导航效果代码思路详解

     代码思路: 页面4: 页面5: 代码思路: 通过jq获取你打开页面的链接  window.location.pathname: 在HTML中给自己的li加入一个ID id的命名与网址链接中的href相同 通过jq包含方法找到相对应的li给他加入active类名 然后..就没有然后了... jq代码: $(function () { var li = $(".title_ul").children("li"); for (var i = 0; i < li.l

  • Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

    解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

  • jquery+css实现侧边导航栏效果

    jquery+css实现侧边导航栏效果

    最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码 这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a

  • jQuery实现菜单栏导航效果

    本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } #top{width: auto;height: 30px;background: #eee;pos

  • jQuery导航条固定定位效果实例代码

    jQuery导航条固定定位效果实例代码

    实现效果图: 向下滑动时,导航栏固定 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } img#search

  • php+jQuery实现的三级导航栏下拉菜单显示效果

    php+jQuery实现的三级导航栏下拉菜单显示效果

    本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(

  • jQuery实现导航栏头部菜单项点击后变换颜色的方法

    jQuery实现导航栏头部菜单项点击后变换颜色的方法

    本文实例讲述了jQuery实现导航栏头部菜单项点击后变换颜色的方法.分享给大家供大家参考,具体如下: 实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ text-decoration: none; color

  • jQuery实现简单的下拉菜单导航功能示例

    本文实例讲述了jQuery实现简单的下拉菜单导航功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv

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

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

  • 微信小程序自定义底部导航带跳转功能

    微信小程序自定义底部导航带跳转功能

    本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml <!--底部导航 --> <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t

  • Flutter定义tabbar底部导航路由跳转的方法

    Flutter定义tabbar底部导航路由跳转的方法

    本文实例为大家分享了Flutter定义tabbar底部导航路由跳转的具体代码,供大家参考,具体内容如下 效果展示 整体实现的目录结构 第一步 把三个页面放到tabs里 Category.dart || Home.dart || Setting.dart 在这里我只展示 Home.dart 另外两个页面相同 import 'package:flutter/material.dart'; class HomePage extends StatefulWidget {   HomePage({Key

  • Mui使用jquery并且使用点击跳转新窗口的实例

    网上好多朋友是这样做的: 全局插入了js代码 mui('body').on('tap', 'a', function () { document.location.href = this.href; }); 这样做是行的,但是有很多问题,比如点击侧栏的时候,就不出现,错误很多, 经实践自己的方法还是可行的,写多了jquery,竟然调试js原生老不成功.可能是生疏了,啥东西还是要用~ 那就先加入jquery @Scripts.Render("~/bundles/jquery") 好了,直

  • 重写 ajax 实现 session 超时跳转到登录页面实例代码

    问题:使用window.location.href来跳转页面的时候,后端只需实现一个过滤器就可以在session超时的情况下重定向到登陆页面.但是使用ajax呢?使用ajax来执行会发生302错误,并且页面不可能跳转.下面就针对这个问题来贴上我的前后端代码. 1.session过滤器 import java.io.IOException; <p style="text-align: center"><img alt=""import javax.s

  • vue-router 实现导航守卫（路由卫士）的实例代码

    导航守卫 导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router

  • 使用jQuery实现两个div中按钮互换位置的实例代码

    使用jQuery实现两个div中按钮互换位置的实例代码

    效果如下 代码如下: <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { /

  • jQuery实现弹出窗口弹出div层的实例代码

    通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链接,弹出一个div层,同时页面的其他部分变灰并且不能点击:无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中:点击页面的关闭按钮,弹出层消失,页面恢复原样. 这里借鉴之前的一篇文章<基于jQuery的固定飘浮层>,使弹出窗口可以始终固定在浏览器的正中间.在这里有一个要点,就是如何使页面的其他地方在弹出窗口的同时变灰.我使用的方法就是在点击链接弹出div层的时候,给页面增加一个div层,这个层就"负责&q

  • jquery根据一个值来选中select下的option实例代码

    jquery怎么根据一个值来选中select下的option <script type="text/javascript"> $(document).ready(function(){ var str=""; str = '${conclusionTypeName}'; $("#firstName option").each(function(){ alert($(this).text()); if($(this).text() ==

  • Android viewpager在最后一页滑动之后跳转到主页面的实例代码

    Android viewpager在最后一页滑动之后跳转到主页面的实例代码

    先给大家说下实现思路 主要有是两个监听: 一是addOnPageChangeListener();二是setOnTouchListener(): addOnPageChangeListener()主要是为了获取position(滑动到了第几页) setOnTouchListener()主要是判断在最后一页中是否向左滑动了,然后进入主页 在没给大家分享代码之前,先给大家展示下效果图: 主要功能代码 addOnPageChangeListener(); viewPager.addOnPageChan

随机推荐