Bootstrap 5首个标签页点击后滚动至顶部问题求助

问题原因 #

首个标签页默认处于激活状态，点击它时Bootstrap的标签组件不会触发切换操作（因为已经是激活状态），此时浏览器会执行<a>标签的默认行为——由于标签未设置有效href属性，浏览器默认导航到#，导致页面滚动到顶部并在地址栏添加#。其他标签页正常是因为点击时Bootstrap的JS会阻止默认行为并完成标签切换。

解决方案 #

方案1：为所有标签锚点添加无效href以阻止默认行为

给每个<a>标签添加href="javascript:void(0)"，避免触发浏览器默认导航：

<li class="nav-item">
    <a href="javascript:void(0)" data-target="#tab11" class="nav-link active text-decoration-none text-dark" data-bs-toggle="tab">Tab1</a>
</li>
<li class="nav-item">
    <a href="javascript:void(0)" data-target="#tab12" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab2</a>
</li>
<!-- 其余标签同理修改 -->

方案2：使用href替代data-target（Bootstrap官方推荐方式）

Bootstrap 5支持通过href直接指向目标面板ID，替换data-target为对应href属性，即使点击激活状态的标签，Bootstrap也会正确处理：

<li class="nav-item">
    <a href="#tab11" class="nav-link active text-decoration-none text-dark" data-bs-toggle="tab">Tab1</a>
</li>
<li class="nav-item">
    <a href="#tab12" class="nav-link text-decoration-none text-dark" data-bs-toggle="tab">Tab2</a>
</li>
<!-- 其余标签同理修改 -->

方案3：通过JS阻止激活标签的默认点击行为

若不想修改HTML结构，可添加JS代码拦截激活状态标签的点击事件：

// 针对ID为myTab1的标签组
document.querySelector('#myTab1').addEventListener('click', function(e) {
    const target = e.target.closest('.nav-link');
    if (target && target.classList.contains('active')) {
        e.preventDefault();
    }
});

额外排查点 #

可检查首个标签页内的Swiper JS是否初始化正常——如果Swiper初始化报错，可能间接影响Bootstrap的事件处理，可通过浏览器控制台查看是否有相关错误信息。

内容的提问来源于stack exchange，提问作者oneclick