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

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到元素中.