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

如果您乐意根据当前网址将该类添加到菜单中，而不是使用.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");
});

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

2 个答案: