使用整页.js移动到部分中的 div 时，菜单中的活动类

Question

我正在使用fullpage.js和一个活动部分菜单，它工作正常，这是代码：-

<ul id="menu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
</ul>
<div id="fullpage">
<div class="section " id="section0">
<h1>Section 1</h1>
</div>
<div class="section active" id="section1">
<div class="slide" id="slide1">
<div class="intro">
<h1>Slide 2.1</h1>
<iframe data-src="auto-height.html"></iframe>
</div>
</div>
<div class="slide active" id="slide2">
<div class="intro">
<h1>Slide 2.2</h1>
<p>
We are using the class `active` on this section and in this particular horizontal slide. This way it will appear on the viewport on page load, instead of the 1st section 1st slide.
</p>
<p>You can apply the same logic to horizontal slides</p>
</div>
</div>
<div class="slide" id="slide3">
<h1>Slide 2.3</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Section 3</h1>
</div>

<div class="intro page-section" id="sec5" style="background-color: antiquewhite">
<h1>Normal scrolling</h1>
<p>
Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi et usu, ex mei dolore vocibus incorrupte.
Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis, an altera ocurreret interesset qui.
Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no has epicuri verterem. Nam at animal pertinax efficiantur.
Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute quaestio, ut eruditi tacimates volutpat per.
Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius at.
Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum verterem. Ea zril aliquip euismod sed.

</p>
</div>
</div>
</div>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
lazyLoad: true,
scrollOverflow: true
});
</script>

我在第 3 节中添加了更多内容以使其scrollable但问题是我想让div 与 id="sec5" 也链接到li，这样当我滚动到id="sec5">时，它将像其他部分一样激活链接，但似乎无法弄清楚它将如何完成，我已经尝试了很多事情，也尝试为它编写自定义jquery，但是不会工作，如果有人在这里帮助我，那就太好了 谢谢！！

Answer 1

文档指出：

每个部分都将使用包含该部分的元素进行定义 .class。默认情况下，活动部分将是第一个部分，它 作为主页。

节应放置在包装器内( 这种情况(。包装器不能是正文元素。

你应该把.section作为#fullpage的孩子

<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

.slide.section的孩子

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

您当前.intro.page-section为.section的子代，ID 为sec5

所以，而不是

<div class="intro page-section" id="sec5" style="background-color: antiquewhite">

尝试使用：

<div class="intro page slide" id="sec5" style="background-color: antiquewhite">