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

Documentation状态：

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

应将各节放在包装内（在   这个案例）。包装器不能是body元素。

您应该将.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的{{1}}个孩子

.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的子代，ID为.section

所以，而不是

sec5

尝试使用：

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

使用fullpage.js移至Section中的div时，菜单中的活动类

1 个答案: