Javascript 在主菜单上突出显示当前页面

我试图使用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>

$（“#主菜单li a”）。在（'click'，function（）上{
$（'li a.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});

如果您愿意根据当前URL将类添加到菜单中，而不是使用

。单击
功能，那么我为您提供了一个解决方案

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

在页面加载时。这会将页面上的所有锚定标记与当前URL进行比较。如果他们匹配。将
.active
类添加到元素。
我想添加到Jay接受的答案中。有时，您的URL可能是一个菜单项的“posts”，而另一个菜单项的“posts/create”。因此，来自已接受答案的代码将突出显示两者。要避免这种情况，请执行以下操作：使用window.location.href而不是location.pathname，并在href之后删除*：

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

我想您已经为类为
活动的元素添加了额外的CSS？