Bootstrap JavaScript 不切换标签

Question

我读了 Bootstrap Introduction, the Navs and tabs page, this 和许多其他的，但我仍然无法弄清楚我的错误是什么。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="nav nav-tabs" role="tablist">
  <button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
  <button class="nav-link" data-bs-target="#tabUpgrades"><i class="bi-download" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button>
</div>


<div class="tab-content">
  <div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
    aaaaa
  </div>
  <div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
    bbbbb
  </div>
</div>

如您所见，选项卡没有切换。据我了解：

包含 JQuery 之前 Bootstrap：完成
设置data-bs-toggle和data-bs-target：完成
使用类，例如 nav-link、tab-pane，等等...：完成

我还缺少什么？

Answer 1

不容易发现，但您的第二个按钮有误

您将 data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades" 放入 <i> 标签

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="nav nav-tabs" role="tablist">
  <button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
  <button class="nav-link" data-bs-target="#tabUpgrades" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"><i class="bi-download" ></i> Upgrades</button>
</div>


<div class="tab-content">
  <div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
    aaaaa
  </div>
  <div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
    bbbbb
  </div>
</div>

Bootstrap JavaScript 不切换标签

Bootstrap JavaScript does not toggle tabs

html

javascript

jquery

twitter-bootstrap