• 炮制数万斤毒豆芽 广州三个黑作坊被警方捣毁 2019-08-02
  • 2018年5月后期资助项目结项名单 2019-08-01
  • 女性之声——全国妇联 2019-07-31
  • 你才是“蠢货”!土地是自然存在的地球的一部分,并不是人类劳动成果,哪来价值?土地不是劳动成果,没有价值,正如空气和阳光不是劳动成果,没有价值一样。懂吗... 2019-07-31
  • 学习贯彻落实习近平总书记重要讲话精神·奥一网(oeeee.com) 2019-07-23
  • 新生儿6种异常不用慌 2019-07-15
  • 海尔发行境外上市外资股获批 2019-07-15
  • 朝鲜将变得很富有?外媒驱动引擎是中国而非美国 2019-07-12
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-06-22
  • 中美研究人员发现新型狗流感病毒 2019-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 【专题】省违反中央八项规定精神和“四风”问题线索举报平台 2019-05-09
  • 确定这是热身赛?吴前拼到大腿抽筋 拆绷带继续干 2019-05-09
  • 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="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="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="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="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'); //默认首页图标高亮
      }

     

    posted @ 2019-04-22 22:53 堆栈 阅读(...) 评论(...) 编辑 收藏
  • 炮制数万斤毒豆芽 广州三个黑作坊被警方捣毁 2019-08-02
  • 2018年5月后期资助项目结项名单 2019-08-01
  • 女性之声——全国妇联 2019-07-31
  • 你才是“蠢货”!土地是自然存在的地球的一部分,并不是人类劳动成果,哪来价值?土地不是劳动成果,没有价值,正如空气和阳光不是劳动成果,没有价值一样。懂吗... 2019-07-31
  • 学习贯彻落实习近平总书记重要讲话精神·奥一网(oeeee.com) 2019-07-23
  • 新生儿6种异常不用慌 2019-07-15
  • 海尔发行境外上市外资股获批 2019-07-15
  • 朝鲜将变得很富有?外媒驱动引擎是中国而非美国 2019-07-12
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-06-22
  • 中美研究人员发现新型狗流感病毒 2019-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 【专题】省违反中央八项规定精神和“四风”问题线索举报平台 2019-05-09
  • 确定这是热身赛?吴前拼到大腿抽筋 拆绷带继续干 2019-05-09
  • 1分赛车导师计划 福利3d试机号走势图 江苏七位数中三位数 内蒙古十一选五开奖结果走势图 北京快三开奖查询结果 澳洲幸运十稳定计划 新时时单追技巧 体彩老11选5开奖结果 11选5浙江助手 冠亚大小套利公式 双色球开机号和试机号机号码查询 安卓游戏急速赛车 江苏时时代理公司 腾讯分分彩开奖结果 十一运夺金遗漏查询 安徽时时十一选五开奖结果