• 中美研究人员发现新型狗流感病毒 2019-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 【专题】省违反中央八项规定精神和“四风”问题线索举报平台 2019-05-09
  • 确定这是热身赛?吴前拼到大腿抽筋 拆绷带继续干 2019-05-09
  • 应对排放新规 大众德国工厂计划短暂停产 2019-04-26
  • 一师一团土地确权登记颁证工作全面展开 2019-04-26
  • 一语惊坛(5月31日):“我们不一样”,中国向世界许下一个承诺。 2019-04-22
  • 俄罗斯世界杯F组:球迷风采 2019-04-10
  • 5月份国民经济数据发布:中国经济持续稳中向好 2019-04-10
  • 贵州宣讲十九大:干部争当宣讲员 群众心窝暖洋洋 2019-03-25
  • 别空谈,说说看,这个“简单的逻辑关系”是什么关系? 2019-03-25
  • 快过闪电,MIUI 10与MIUI 9速度对比 2019-03-21
  • 泽州去年“免费教育”资金达5211万元 2019-03-19
  • jQuery对底部导航进行跳转并高亮显示

    快乐彩开奖号码 www.752o.com 这两天弄一个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-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 【专题】省违反中央八项规定精神和“四风”问题线索举报平台 2019-05-09
  • 确定这是热身赛?吴前拼到大腿抽筋 拆绷带继续干 2019-05-09
  • 应对排放新规 大众德国工厂计划短暂停产 2019-04-26
  • 一师一团土地确权登记颁证工作全面展开 2019-04-26
  • 一语惊坛(5月31日):“我们不一样”,中国向世界许下一个承诺。 2019-04-22
  • 俄罗斯世界杯F组:球迷风采 2019-04-10
  • 5月份国民经济数据发布:中国经济持续稳中向好 2019-04-10
  • 贵州宣讲十九大:干部争当宣讲员 群众心窝暖洋洋 2019-03-25
  • 别空谈,说说看,这个“简单的逻辑关系”是什么关系? 2019-03-25
  • 快过闪电,MIUI 10与MIUI 9速度对比 2019-03-21
  • 泽州去年“免费教育”资金达5211万元 2019-03-19
  • 北京赛车高手玩法 足彩大奖图片 江西快3三同号单选 辽宁开乐彩 龙族幻想现在能玩吗 奇迹觉醒结婚系统攻略 竞彩网官方首页 重庆时时彩开奖结果 云南时时彩购买 网球场国外 足彩开奖 拳皇命运人物排行 重庆时时彩开奖号码公告 老虎机亚洲风情 热带动物园送彩金 微信上买彩票怎么买