bootstrap药丸如何显示药丸TAB没有滚动引导5

Question

我使用bootstrap 5，我想在同一个div上显示3个表，并使用导航药丸在它们之间导航，但我遇到的问题是，当我第一次点击导航时，表格将正确显示，但它会自动滚动到页面顶部这是我的导航药丸

<ul class="nav nav-pills " >
<li class="nav-item">
<a href="#a" class="nav-link active"  data-toggle="tab"> a</a>
</li>
<li class="nav-item">
<a href="#b" class="nav-link" data-toggle="tab"> b</a>
</li>
<li class="nav-item">
<a href="#c" class="nav-link"  data-toggle="tab">c</a>
</li>
</ul>

Answer 1

欢迎来到SO，您遇到的问题是由您使用锚标记(<a>)而不是按钮引起的。锚是用来导航的，因此你会被带到页面的顶部。我相信你所遵循的文档部分是针对导航栏的，而不是针对选项卡界面的。

这里的文档应该给你你正在寻找的结果。请注意，它使用按钮而不是锚，并且依赖JavaScript来提供动态外观。