时间戳

首页 > 解决方案 > 为什么 BS4 Scrollspy 不能正常工作？

html - 为什么 BS4 Scrollspy 不能正常工作？

问题描述

我在让 Bootstrap 4 的 Scrollspy 工作时遇到问题。我已经检查了 BS4 文档并在 youtube 上做了一个小的 Scrollspy 教程，但我不知道我做错了什么。我目前正在为 BS4 的 CSS 和 JS 文件使用 CDN。这是一个 codepen 的链接：https ://codepen.io/James-Goodwin/pen/QYpePq

<body data-spy="scroll" data-target="#responsiveNav" data-offset="50">

  <header id="home">
    <!--Navbar-->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a href="index.html" class="navbar-brand"><!--<img src="img/ShadeSetters-logo.png" alt="Shade Setters logo">-->ShadeSetters</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveNav">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse" id="responsiveNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#content1">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#content2">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#content3">Testimonials</a></li>
          <li class="nav-item"><a class="nav-link" href="#content4">FAQ</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <section id="content1" class="container-fluid bg-success" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content2" class="container-fluid bg-warning" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content3" class="container-fluid bg-primary" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>

  <section id="content4" class="container-fluid bg-danger" style="padding-top:70px; padding-bottom: 70px">
    <h1>Content 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptatem, facilis, nisi harum qui quibusdam asperiores excepturi facere dolor eveniet enim praesentium voluptates. Recusandae, voluptatibus sed temporibus quidem, voluptatum veniam
      debitis error, sit id quod quae alias, expedita corporis soluta.</p>
  </section>
</body>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

您创建的 Codepen 不包含 Scrollspy 组件所需的 Bootstrap JS。此外，.active该类将在 CSS 中设置，而不是:active状态。

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #59abe3;
}

Codeply：https ://www.codeply.com/go/31pbFXSYkg

推荐阅读