我遇到了 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。似乎没有任何效果。