今天寫一個(gè)不太難的問題韩脑,但是對(duì)于有些知識(shí)點(diǎn)盲區(qū)的地方,就要花一些時(shí)間去百度胎食,查資料解決問題了扰才。項(xiàng)目開發(fā)的時(shí)候會(huì)遇到這樣或者那樣的問題,比如厕怜,左側(cè)導(dǎo)航欄二級(jí)菜單點(diǎn)擊之后衩匣,跳轉(zhuǎn)新的界面,新的界面的高亮狀態(tài)是點(diǎn)擊時(shí)候的狀態(tài)粥航。
實(shí)現(xiàn)代碼如下
html代碼
<li ><a href="#"><i class="fa fa-cogs"></i><span th:text="#{side.data}"></span></a>
<ul class="allnav">
<li><a href="staff"><span th:text="#{side.data.staff}"></span></a></li>
<li><a href="caller"><span th:text="#{side.data.caller}"></span></a></li>
<li><a href="stat"><span th:text="#{side.data.stat}"></span></a></li>
<li><a href="device"><span th:text="#{side.data.status}"></span></a></li>
</ul>
</li>
js代碼
/* href 屬性是一個(gè)可讀可寫的字符串琅捏,可設(shè)置或返回當(dāng)前顯示的文檔的完整 URL
$(this)[0].href 當(dāng)前頁(yè)面打開URL頁(yè)面*/
$(".allnav li a").each(function () {
//window.location.href對(duì)象用于獲得當(dāng)前頁(yè)面的地址 (URL),
//String() 函數(shù)把對(duì)象的值轉(zhuǎn)換為字符串
if ($(this)[0].href == String(window.location)) {
//該元素增加一個(gè)類on同時(shí)它的兄弟元素去掉on類
//二級(jí)菜單高亮
$(this).addClass("on").siblings().removeClass("on");
//一級(jí)菜單高亮
$(this).closest('ul').parent("li").addClass("on").siblings().removeClass("on");
}
});
css
.on {
font-weight: bold;
background:blue;
}
原文作者:祈澈姑娘 技術(shù)博客:http://www.reibang.com/u/05f416aefbe1
90后前端妹子递雀,愛編程柄延,愛運(yùn)營(yíng),文藝與代碼齊飛缀程,魅力與智慧共存的程序媛一枚搜吧。