功能需求：
今天在寫一個站點需要用到在導航菜單點擊鏈接跳轉到新頁面后，高亮當前菜單樣式。
簡單的說，就是我點擊導航菜單中的一個欄目，跳轉到該欄目下，該欄目菜單也同時高亮（可以是背景色也可以是背景圖片）

解決方法：
通過查看實例，我們需要用到JS中的jquery來實現這種效果，也可以通過CSS設置不同頁面的a:hover實現效果，不過這顯然是比較笨拙的方法。
那么，如何用JS來實現效果呢,實現它所用的原理就是通過js中的location.href得到當前頁面的地址，然后在與導航上的鏈接地址匹對，相同的就用一個css樣式標記。此方法支持動態鏈接和靜態鏈接多種形式。
效果圖：

代碼如下：

?

<script type="text/javascript" src="jquery.min.js"></script> <style> .menu { padding:0; margin:0; list-style-type:none;} .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; } .menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}.cur{ background:#D96C00; font-weight:bold;} </style><ul class="menu" id="menu"> <li><a href="a.html">首頁</a></li> <li><a href="b.html">SEO優化</a></li> <li><a href="c.html">生活娛樂</a></li> </ul><script type="text/javascript"> var urlstr = location.href; //alert((urlstr + "/").indexOf($(this).attr("href"))); var urlstatus=false; $("#menu a").each(function () { if ((urlstr + "/").indexOf($(this).attr("href")) > -1&&$(this).attr("href")!=”) { $(this).addClass("cur"); urlstatus = true; } else { $(this).removeClass("cur"); } }); if (!urlstatus) {$("#menu a").eq(0).addClass("cur"); } </script>

?

?

?

?

?

總結

以上是生活随笔為你收集整理的导航跳转后保持选中状态 jquery高亮当前选中菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。