這兩天弄一個mui的底部菜單,有點費時了,嘗試了用vue寫,純js寫,還有根據mui的寫,還是有些問題和麻煩。直到看了網上的一些例子,才想明白,之前一直是一種點擊觸發事件才高亮的思維去做,這個雖然可以了,但是頁面跳轉了就又都沒了。網上看明白的例子是:讓當前頁面地址與導航里的地址做對比,相同就高亮,之 ...
這兩天弄一個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'); //預設首頁圖標高亮 }