Question

我无法将我的导航项目显示为＆＃34;活跃＆＃34;使用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适用于滚动到右侧部分，但由于某种原因，导航元素不会变为“活跃”＃34;。有任何想法吗？谢谢 - 迈克尔

Answer 1

当您使用Bootstrap Version 3的资产（CSS和Javascript）时，您的标记代表Version 4。一般来说，它们不可互换。您需要/想要更改标记以反映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>

导航未使用Bootstrap ScrollSpy进行更新

1 个答案: