活动导航栏将不起作用

Question

我正在构建一个包含部分的网站，我希望他们在每个部分上滚动。为此，我正在使用 fullpage.js 并且一切正常。我还有一个菜单，我希望当我们在第一部分时，第一个选项卡处于活动状态。这就是问题所在，如果我将 data-spy="scroll" 放在我的 body 标签上，它只是最后一个活动的标签。我正在使用 bootstrap 作为 css。

这是我的 html 页面，没有所有未使用的 class 和 div

<body data-spy="scroll" data-target=".navbar">
    <div class="nav_div col-sm-offset-5 col-sm-7"> 
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-center">
                <li class="active"><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#link">link</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>    
    </div>
    <span id="fullpage" class="col-sm-12">
        <section id="link" class="section active">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
        <section id="link" class="section">
            bla bla bla
        </section>
    </span>
</body>

这是我的 js，用于在滚动时启用活动选项卡，如果我停用 fullpage.js

$(function() {
         "use strict";
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({scrollTop: target.offset().top}, 700);
                    return false;
                }
            }
        });
    });

和整页 js

$(document).ready(function() {
        $('#fullpage').fullpage({
            responsiveWidth: 768,
            scrollOverflow: true
        });
    });

Answer 1

这就在 Documentation 中，转到选项然后 MENU.

menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:

导航示例

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

JS 示例

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

您必须向所有锚链接添加一个 HTML 5 数据标签 (data-menuanchor)，并为您的 HREF 使用相同的名称。

data-menuanchor="firstPage" and href="#firstPage"

然后将它们与 UL ID/Class.

一起添加到您的函数中

anchors: ['firstPage', 'secondPage', 'thirdPage'],
menu: '#myMenu'

请参阅全页代码段中的工作示例。

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    fixedElements: '.navbar-fixed-top',
    menu: '#bs-nav',
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    css3: true
  });
  //So the Mobile Nav Hides When a Link is Clicked
  $(".navbar-nav li a").click(function(event) {
    $(".navbar-collapse").collapse('hide');
  });
});

p {
  font-size: 26px;
  text-align: center;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul id="#nav" class="nav navbar-nav">
        <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First Page</a>

        </li>
        <li data-menuanchor="secondPage"><a href="#secondPage">Second Page</a>

        </li>
        <li data-menuanchor="thirdPage"><a href="#thirdPage">Third Page</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div id="fullpage">
  <div id="one" class="section">
    <p>1 Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
  </div>
  <div id="two" class="section">
    <p>2 Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
  </div>
  <div id="three" class="section">
    <p>3 Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
  </div>
</div>

活动导航栏将不起作用

Active navbar won't work

scroll

navbar

twitter-bootstrap

fullpage.js