Bootstrap scrollspy 问题

问题描述 投票:0回答:0

我遇到了 scrollspy 的问题。首先,活动类不会改变任何东西。我可以看到正在动态添加活动类,但仅添加到第一个锚标记。如果我手动将它添加到标记中,浏览器会立即将它恢复为 ul 中的第一个锚点。所以,我知道 JS 正在工作,但由于某种原因它没有应用于滚动上的其他锚元素。对于那些想知道的人,是的,ids 与 hrefs 匹配。

<body data-bs-spy="scroll" data-bs-target=".scrollspy" tabindex="0">
<header class="header" id="home">
    <nav class="navbar navbar-expand-xl navbar-dark display-6" id="navbar">
      <a href="#" class="navbar-brand mx-5">
        <img class="navbar__brand" src="img/logo.png" alt="Roots reggae logo">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="scrollspy collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <ul class="nav navbar-nav mx-5 mb-2 mb-lg-0 gap-5">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#main-content">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#gallery">Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#ticket">Tickets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#book">Book a Ticket</a>
          </li>
          <li>
            <button type="button" class="btn btn-primary position-relative rounded-4">
              <i class="fa fas fa-shopping-cart text-white display-3"></i>
              <span id="cart-total"
                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger fs-3">
                0
                <span class="visually-hidden">unread messages</span>
              </span>
            </button>
          </li>
        </ul>
      </div>
    </nav>
  </header>

正如您在 ul 中看到的那样,我手动将活动类添加到画廊锚点,然后它跳回主页锚点,因此 JS 肯定可以正常工作,但我无法将活动类动态应用到其他锚点。

我还尝试将目标 id 放在 .nav 元素本身上,还尝试为 ul 创建一个新的父 div 并定位该 div。似乎没有任何效果。

scrollspy
© www.soinside.com 2019 - 2024. All rights reserved.