多个锚点 link 菜单活动锚点 class

Question

我在一个单页网站上有多个充满锚 link 的菜单，如下所示：

<ul>
    <li><a href="#home" class="active" onclick="closeNav();">Home</a></li>
    <li><a href="#about" onclick="closeNav();">About</a></li>
    <li><a href="#portfolio" onclick="closeNav();">Portfolio</a></li>
    <li><a href="#news" onclick="closeNav();">News</a></li>
</ul>

我找到了一些代码，可以让我向当前锚点 link 添加活动的 class，但代码并未突出显示所有实例。

例如，我在站点的顶部和底部有一个具有不同 ID 的菜单，但是当我单击 "About" 锚点时，菜单中只有 "About" 锚点单击获取活动 class - 而不是页面上的两个 "About" 锚点 link。

我正在使用的 jQuery 看起来像：

$("#top-nav li, #foot-nav li").click(function(e) {
    e.preventDefault();
    $(this).closest('#top-nav,     
    #foot-nav').find('li').removeClass("active");
    $(this).closest("li").addClass("active");
});

有什么方法可以更改功能，以便在单击 #about 或任何其他锚点时，两个菜单中的 "About" link 都会激活 class ？

谢谢，
乔希

Answer 1

一般来说，'this' 在您的案例中只有一项，而且是您刚刚点击的项目。是的，您将事件侦听器添加到两个导航项，但您总是每次只单击一个。要找到所有相同的项目，您需要在回调中搜索在不同导航中具有相同锚点的所有项目，然后 add/remove 'active' class。也许您可以改进此代码并减少它。

在此处查看工作代码 https://codepen.io/anon/pen/YgOyWj。

html:
<ul id="top-nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about" >About</a></li>
    <li><a href="#portfolio" >Portfolio</a></li>
    <li><a href="#news" >News</a></li>
</ul>

  <ul id="foot-nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about" >About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#news">News</a></li>
</ul>


css: 
.active a { color: green; }


js:
const navsStr = '#foot-nav li, #top-nav li';

$(navsStr).on('click', function (e) {
  e.preventDefault();
  const href = $(this).find('a').attr('href');
  let items = $(navsStr).find('a[href$="' + href + '"]');
  $(items).parent().addClass('active').siblings().removeClass('active');  
});

多个锚点 link 菜单活动锚点 class

Multiple anchor link menus active anchor class

css

anchor

jquery

menu