Добавление активного класса в два/разделенное меню с помощью fullPage.js

Question

Я использую fullPage.JS и имею в виду, что раздел меню работает нормально (прокручивается вверх и вниз), кроме половины моего меню в заголовке и половину в нижнем колонтитуле , Это отлично работает для навигации, но не добавляет класс «active» в li в нижнем колонтитуле только к заголовку. Я предполагаю, потому что оба меню имеют одинаковый идентификатор, так как удаление идентификатора меню заголовка делает меню нижнего колонтитула работать с активным классом. Как заставить меня работать? возможно, обратные вызовы?

Подобно этому ответу: 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> 

Answer 1

В HTML В id attribute должен быть уникальным. Если вы хотите селектор, чтобы применить более чем один элемент классов использования CSS, например .:

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

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

Тогда ваш селектор будет выглядеть следующим образом:

menu:'.my-menu'