多个锚链接菜单活动锚类

Posted 2023-05-08

【中文标题】多个锚链接菜单活动锚类

【英文标题】：Multiple anchor link menus active anchor class

【发布时间】：2019-08-09 05:45:44

【问题描述】：

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

<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 或任何其他锚点时，两个菜单中的“关于”链接都会获得一个活动类？

谢谢， 乔什

【参考方案1】：

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

在此处查看工作代码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');  
);