Bootstrap 5选项卡无法切换内容问题排查

你的Tabs无法切换的核心问题是Bootstrap 5 变更了数据属性命名规则，同时需确保正确引入Bootstrap的JavaScript依赖。

1. 修正数据属性 #

Bootstrap 5 将原Bootstrap 4中的data-toggle属性统一改为data-bs-toggle，你代码里的选项卡链接仍使用旧属性，导致JS无法识别切换触发事件。

修改后的选项卡链接代码：

<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>

2. 确认依赖资源引入 #

Tabs的交互功能需要Bootstrap JavaScript的支持，Bootstrap 5 依赖Popper.js，因此你需要在页面中正确引入：

• Bootstrap 5 的CSS文件
• Popper.js（可通过Bootstrap集成包引入，也可单独引入）
• Bootstrap 5 的JavaScript文件

完整可运行代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Bootstrap 5 CSS -->
  <link rel="stylesheet" href="bootstrap.min.css">
  <title>Bootstrap 5 Tabs</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col">
      <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>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
      </div>
    </div>
  </div>
</div>

<!-- 引入Popper.js和Bootstrap 5 JS -->
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

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