导航未使用 Bootstrap ScrollSpy 更新答案

【问题标题】：Navigation not updating with Bootstrap ScrollSpy导航未使用 Bootstrap ScrollSpy 更新
【发布时间】：2016-12-18 05:44:54
【问题描述】：

我无法使用 bootstrap ScrollSpy 让我的导航项显示为“活动”。我已经包含了 bootstrap.js (Bootstrap v4.0.0-alpha.5) 和 jquery.min.js (3.1.1)。

我在body元素中设置了data-spy和data-target如下；

<body data-spy="scroll" data-target=".navbar">

我的导航部分如下所示；

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand page-scroll" href="#page-top">Logo Here</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse66" 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="navbar-collapse66">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="page-scroll" href="#page-top">About</a></li>
                <li><a class="page-scroll" href="#section-portfolio">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

链接#page-top 和#section-portfolio 可以很好地滚动到右侧部分，但由于某种原因，导航元素没有变得“活跃”。有任何想法吗？谢谢 ——迈克尔

【问题讨论】：

标签： javascript jquery twitter-bootstrap scrollspy

【解决方案1】：

您的标记代表Bootstrap Version 3，而您使用Version 4 的资产（CSS 和Javascript）。一般来说，它们不能互换。如果您打算使用 v4，您将需要/想要更改标记以反映 v4。

v4.0.0-alpha.5 Navbar vs v3.3.7 Navbar

工作 v4 示例：

body {
  position: relative;
}
section {
  padding: 100px 50px 50px;
  height: 750px;
}
#about {
  background: #ffebee;
}
#projects {
  background: #f44336;
}
#contact {
  background: #d32f2f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".navbar">

  <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav float-xs-right">
      <li class="nav-item">
        <a class="nav-link" href="#about">About <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">Projects</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

  <section id="about">
    <h1>About</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="projects">
    <h1>Projects</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="contact">
    <h1>Contact</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

</body>

工作 v3 示例：

body {
  position: relative;
}
section {
  padding: 100px 50px 50px;
  height: 750px;
}
#about {
  background: #ffebee;
}
#projects {
  background: #f44336;
}
#contact {
  background: #d32f2f;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".navbar">

  <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="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Logo Here</a>
      </div>

      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">About</a>
          </li>
          <li><a href="#projects">Projects</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

  <section id="about">
    <h1>About</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="projects">
    <h1>Projects</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <section id="contact">
    <h1>Contact</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

【讨论】：