突出顯示主菜單上的當前頁面

Question

我正在嘗試使用javascript / jQuery突出顯示主菜單上的當前頁面列表項。 我是腳本新手，無法解決問題所在。 這是我一直在嘗試的代碼。

<ul id="#mainMenu">
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

<script type="text/javascript">
$('#mainMenu li a').on('click', function(){
    $('li a.active').removeClass('active');
    $(this).addClass('active');
});
</script>

Answer 1

如果你很樂意根據當前的URL將類添加到菜單中，而不是使用.click函數，那么我有一個解決方案。

$(document).ready(function(){
    $("a[href*='" + location.pathname + "']").addClass("active");
});

在頁面加載。 這會將頁面上的所有錨標記與當前URL進行比較。 如果他們匹配。 將.active類添加到元素中。

Answer 2

我想補充傑伊接受的答案。 有時，您的URL可能是菜單項的“帖子”，另一個是“發布/創建”。 因此，接受答案的代碼將突出顯示兩者。 要避免這種情況，請執行以下操作：使用window.location.href而不是location.pathname並在href之后刪除*：

$(document).ready(function(){
    $("a[href='" + window.location.href + "']").addClass("active");
});