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

我在一个单页网站上有多个满是锚链接的菜单，看起来像：

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

$("#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”链接都会获得一个活动类

谢谢，

---

Josh

一般来说，在您的情况下，“this”只是一个项目，它是您刚刚单击的项目。是的，您已将事件侦听器添加到两个navs项目中，但每次仅单击一个。要查找所有相同的项目，您需要在回调中搜索不同导航中具有相同锚点的所有项目，然后添加/删除“活动”类。也许您可以改进此代码并减少它

请参见此处的工作代码

html：












css:
.active a{color:green；}
js:
const navsStr='英尺导航李，'顶部导航李'；
$（navsStr）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
常量href=$（this.find（'a'）.attr（'href'）；
let items=$（navsStr.find（'a[href$=“'+href+'”）；
$（items）.parent（）.addClass（'active'）.sides（）.removeClass（'active'）；
});

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