Bootstrap 5 nav pills切换标签时自动滚动到页面顶部如何解决？

问题根源 #

1. Bootstrap 5 专属的 tab 交互属性为 data-bs-toggle，你当前使用的 data-toggle 是 Bootstrap 4 的旧版本属性，属性不匹配会导致默认交互逻辑异常。
2. a 标签的 href 属性直接填写锚点值时，点击会触发浏览器默认的锚点定位行为，未激活的 tab 面板默认是隐藏状态，浏览器无法定位到隐藏元素的位置，就会自动滚动到页面顶部。

修正方案 #

将锚点目标从 href 属性转移到 data-bs-target 属性，href 改为无跳转的占位值即可，修正后的导航代码如下：

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link active" data-bs-toggle="tab" data-bs-target="#a">a</a>
    </li>
    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link" data-bs-toggle="tab" data-bs-target="#b">b</a>
    </li>
    <li class="nav-item">
        <a href="javascript:void(0)" class="nav-link" data-bs-toggle="tab" data-bs-target="#c">c</a>
    </li>
</ul>

同时确保你的 tab 内容部分结构符合 Bootstrap 5 规范，示例如下：

<div class="tab-content">
    <div class="tab-pane active" id="a">
        <!-- 第一个表格代码 -->
        <table class="table">...</table>
    </div>
    <div class="tab-pane" id="b">
        <!-- 第二个表格代码 -->
        <table class="table">...</table>
    </div>
    <div class="tab-pane" id="c">
        <!-- 第三个表格代码 -->
        <table class="table">...</table>
    </div>
</div>

如果修改属性后仍存在跳转问题，可以添加以下 JS 代码手动阻止默认跳转行为：

document.querySelectorAll('.nav-pills .nav-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const tabInstance = new bootstrap.Tab(this);
        tabInstance.show();
    })
})

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