使用fullpage.js移至Section中的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但是問題是我想使id =“ sec5”的 div也鏈接到li，以便當我滾動到id =“ sec5”時它將像它那樣激活鏈接其他部分，但似乎無法弄清楚它將如何完成，我已經嘗試了很多事情，還嘗試為其編寫自定義的jquery ，但那將無法正常進行，如果有人在這里幫助我，那將非常棒！ ！

Answer 1

文檔狀態：

每個節將使用包含節類的元素進行定義。 默認情況下，活動部分將是第一部分，將其作為主頁。

將節放置在包裝器內（在這種情況下）。 包裝器不能是body元素。

您應該將.section作為#fullpage子#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>

.section .slide子對象

<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">