導航跳轉後保持選中狀態 jquery高亮當前選中菜單

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

解決方法：
經過查看實例，咱們須要用到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>
from https://blog.csdn.net/yusirxiaer/article/details/62216550