使用fullPage.js将活动类添加到两个/拆分菜单

时间:2015-01-23 15:12:22

标签: javascript jquery fullpage.js

我正在使用fullPage.JS并让菜单工作正常(向上和向下滚动)除了我想要在标题中的一半菜单和页脚的一半。这适用于导航但不添加类"活动"在页脚中的li只到标题。我假设它是因为两个菜单都具有与删除标题菜单ID相同的ID,使得页脚菜单与活动类一起使用。我如何让两者兼顾?也许是回调?

与此答案类似: FullPage.js - add active class to menu anchor when on a nonematching section

$('#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>

1 个答案:

答案 0 :(得分:2)

在HTML中,id attribute必须是唯一的。如果希望选择器应用于多个元素,请使用CSS类,例如:

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

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

然后你的选择器看起来像:

menu:'.my-menu'