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'); //預設首頁圖示高亮
  }      

轉載于:https://www.cnblogs.com/lisiping/p/10753675.html