我閱讀了 Bootstrap Introduction、Navs and tabs page、這個答案和許多其他內容，但我仍然無法弄清楚我的錯誤是什么。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>如您所見，選項卡不會切換。從我學到的：
- 在Bootstrap之前包含 JQuery ：完成
- 設定
data-bs-toggle和data-bs-target：完成 - 使用 , 等類
nav-link...tab-pane：完成
我還缺少什么？
uj5u.com熱心網友回復：
不容易發現，但您的第二個按鈕有錯誤
你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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/467354.html
標籤：javascript html jQuery 推特引导
上一篇：對同一行上的唯一值進行排序