溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這兩天弄一個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對底部導航進行跳轉并高亮顯示的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
