复制自Bootstrap官方文档的tabs标签页代码无法正常切换求助

问题原因 #

你复制的是Bootstrap 4版本的tab组件代码，Bootstrap 5对所有组件的自定义数据属性做了不兼容更新，所有原有data-*的交互属性都需要加上bs-前缀才能生效。你代码里的data-toggle="tab"是Bootstrap 4的写法，在Bootstrap 5环境下无法触发tab切换逻辑，所以点击只会触发默认的锚点跳转，不会切换内容。

解决方法 #

只需修改所有tab触发链接的属性即可：
把每个<a class="nav-link">标签上的data-toggle="tab"替换为data-bs-toggle="tab"。

如果不想点击时地址栏出现锚点后缀，可以把原有href="#xxx"的属性替换为data-bs-target="#xxx"，保留href也不影响功能。

修改后的tab触发部分代码示例：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

注：你引入的bootstrap.bundle.min.js已经包含了tab切换需要的所有JS依赖，不需要额外引入jQuery，本地的jquery.js可以删除。

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