时间戳

首页 > 解决方案 > 使用 fullpage.js 移动到部分内的 div 时，菜单中的活动类

javascript - 使用 fullpage.js 移动到部分内的 div 时，菜单中的活动类

问题描述

我正在使用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为它编写自定义，但这不会起作用，如果有人在这里帮助我，那就太好了谢谢！

标签： javascriptjqueryhtmlcssfullpage.js

解决方案

文档指出：

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

部分应放置在包装器内（在这种情况下）。包装器不能是 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孩子.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>

您目前拥有id 的.intro.page-section孩子.sectionsec5

所以，而不是

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

尝试使用：

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

推荐阅读