Question

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

<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>

我找到了一些代码，可以让我向当前的锚链接添加一个活动类，但是该代码并未突出显示所有实例。

例如，我在网站的顶部和底部有一个具有不同ID的菜单，但是当我单击“关于”锚时，在我单击的菜单中只有“关于”锚是活动类-而不是页面上的两个“关于”锚链接。

我正在使用的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或任何其他锚点时，两个菜单中的“关于”链接都会变为活动类？

谢谢，
乔什

Answer 1

通常情况下，“ this”只是一个项目，它就是您刚刚单击的项目。是的，您向两个导航项都添加了事件侦听器，但是每次始终只单击一个。要查找所有相同的项目，您需要在回调中搜索在不同导航中具有相同锚点的所有项目，然后添加/删除“活动”类。也许您可以改进此代码，而mb则可以减少它。

在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');  
});

多个锚点链接菜单活动锚点类

1 个答案: