javascript - 将自定义导航栏添加到 Fullpage.js 中的特定部分

Question

我使用 Fullpage.js 在第 1 节内添加了一个 Bootstrap 自定义导航栏，以实现“我们的功能效果”，当您单击选项卡时，该节内的文本会发生变化。

Bootstrap 代码有效，但我想在第 1 节的底部设置导航栏，但它不断将自己添加到第 0 节。

实现此目标的最佳方法是什么？

CSS:

#section0 {
    background:url("images/vd48-main.jpg") center top no-repeat; 
    background-image: url("images/vd48-main.jpg");
    background-position: fixed;
    background-color: #000000;
}
#section1 {
    background:url("images/vd48-main.jpg") center top no-repeat; 
    background-image: url("images/vd48-main.jpg");
    background-position: fixed;
}
#section2 img{
    margin: 20px 0 0 52px;
    background-image: url(images/vd48-main.jpg);
    padding: 30% 0 0 0;
}
#section3 img{
    bottom: 0px;
    position: absolute;
    margin-left: -420px;
}   
.intro p{
    width: 50%;
    margin: 0 auto;
    font-size: 1.5em;
}
.twitter-share-button{
    position: absolute;
    z-index: 99;
    right: 149px;
    top: 9px;
}
.fp-tooltip{
    color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
    border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
    background: #AAA;
}
.nav-tabs{
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.bg-inverse{
    z-index: 999;
}

HTML:

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage">Visit Counter</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Feature Image</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Big Image</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Product Specs 1</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Product Specs 2</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Product Specs 3</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Customer Care</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Our App</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Reservation/Contact</a></li>

</ul>


<div id="fullpage">


<!-- Section 0 -->

    <div class="section" id="section0">

        <h1>Van Dutch</h1>
        <p>Visit Counter lorem ipsum </p>

    </div>



<!--Section 1 -->

<div class="section" id="section1">
    <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>

<div class="container">

    <h2>Dynamic Tabs</h2>


    <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>

    <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    </div>
    </div>
    </div>



<!--Section 2 -->

<div class="section" id="section2">
    <div class="intro">
        <h1>Example</h1>
        <p>HTML markup example to define 4 sections.</p>
        <img src="imgs/example2.png" alt="example" />
    </div>
</div>



<!--Section 3 -->

<div class="section" id="section3">
    <div class="intro">
        <h1>Working On Tablets</h1>
        <p>
            Designed to fit to different screen sizes as well as tablet and mobile devices.
            <br /><br /><br /><br /><br /><br />
        </p>
    </div>
    <img src="imgs/tablets.png" alt="tablets" />
</div>

<!--Left Sidebar -->

<div id="fp-nav" class="left" style="margin-top: -43.5px;">

    <ul>

        <li>
            <a href="#" class="active"><span></span></a>
            <div class="fp-tooltip left">fullPage.js</div>
        </li>

        <li>
            <a href="#" class=""><span></span></a>
            <div class="fp-tooltip left">Powerful</div>
        </li>

        <li>
            <a href="#" class=""><span></span></a><div class="fp-tooltip left">Amazing</div>
        </li>

        <li>
            <a href="#" class=""><span></span></a><div class="fp-tooltip left">Simple</div>
        </li>


    </ul>

</div>

Answer 1

我设法使用 CSS 解决了我的问题。

#section1 .nav-tabs{

        width: 100%;
        position: absolute;
        bottom: 0;
        }