快捷導(dǎo)航

jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼

更新時(shí)間：2019年04月23日 09:05:01 作者：堆棧

這篇文章主要介紹了jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

這兩天弄一個(gè)mui的底部菜單，有點(diǎn)費(fèi)時(shí)了，嘗試了用vue寫(xiě)，純js寫(xiě)，還有根據(jù)mui的寫(xiě)，還是有些問(wèn)題和麻煩。直到看了網(wǎng)上的一些例子，才想明白，之前一直是一種點(diǎn)擊觸發(fā)事件才高亮的思維去做，這個(gè)雖然可以了，但是頁(yè)面跳轉(zhuǎn)了就又都沒(méi)了。網(wǎng)上看明白的例子是：讓當(dāng)前頁(yè)面地址與導(dǎo)航里的地址做對(duì)比，相同就高亮，之前思維太死，一直以點(diǎn)擊才觸發(fā)事件來(lái)寫(xiě)，結(jié)果問(wèn)題好幾個(gè)。接下來(lái)上代碼

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

這里就放菜單部分代碼，在針對(duì)vue寫(xiě)菜單的時(shí)候，是把導(dǎo)航寫(xiě)到data，再循環(huán)遍歷輸出，最終由于購(gòu)物車(chē)的數(shù)字角標(biāo)顯示問(wèn)題而放棄，采用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是作對(duì)比的-->
    <span class="fa fa-home"></span>
    <span class="mui-tab-label">首頁(yè)</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">購(gòu)物車(chē)</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>

接下來(lái)是jQuery語(yǔ)句

var urlstr = location.href;　　　　//獲取瀏覽器的url
 var urlstatus=false;　　
 $('#menu a').each(function() {
   if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
      // 為當(dāng)前點(diǎn)擊的導(dǎo)航加上高亮，其余的移除高亮
      $(this).find('span').addClass('active');
      urlstatus = true;
    } else {
     $(this).removeClass('active');
    }
  });
 if (!urlstatus) {
   $("#menu a span").eq(0).addClass('active'); //默認(rèn)首頁(yè)圖標(biāo)高亮
 }

總結(jié)

以上所述是小編給大家介紹的jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: