将活动类添加到两个/具有整页.js的拆分菜单

Adding active class to two / split menu with fullPage.js

本文关键字：js 菜单 拆分 两个 添加 活动      更新时间：2023-09-26

我正在使用fullPage.JS并且除了我希望一半的菜单在页眉中和一半在页脚中之外，菜单部分工作正常（上下滚动）。这适用于导航，但不会将类"active"添加到页脚中的 li 中，仅用于页眉。我假设这是因为两个菜单都具有相同的 ID，因为删除标题菜单 ID 使页脚菜单与活动类一起使用。如何让两者正常工作？也许是回调？

类似于这个答案：整页.js - 在不匹配的部分将活动类添加到菜单锚点

$('#fullpage').fullpage({
    anchors: ['PAGE1','PAGE2','PAGE3','PAGE4','PAGE5','PAGE6',],
    menu:'#menu',
});

<div id="headermenu">
    <ul id="menu">
        <li data-menuanchor="PAGE1"><a href="#PAGE1">PAGE1</a></li>
        <li data-menuanchor="PAGE2"><a href="#PAGE2">PAGE2</a></li>
        <li data-menuanchor="PAGE3"><a href="#PAGE3">PAGE3</a></li>
    </ul>
</div>
<div id="footermenu">
    <ul id="menu">
        <li data-menuanchor="PAGE4"><a href="#PAGE4">PAGE4</a></li>
        <li data-menuanchor="PAGE5"><a href="#PAGE5">PAGE5</a></li>
        <li data-menuanchor="PAGE6"><a href="#PAGE6">PAGE6</a></li>
    </ul>
</div>

在 HTML 中，id 属性必须是唯一的。如果您希望将选择器应用于多个元素，请使用CSS类，例如：

<ul class="my-menu">
</ul>
...
<ul class="my-menu">
</ul>

然后，您的选择器将如下所示：

menu:'.my-menu'
相关文章：