Bootstrap Tab 切換失效？90% 是 JS 載入順序錯了

Bootstrap Tab 點擊無反應、內容不切換，最常見原因是 jQuery 必須在 bootstrap.js 之前載入。本地檔案與 CDN 混用時極易順序顛倒。

錯誤與正確對比

<!-- ❌ 錯誤：bootstrap 先於 jquery -->
<script src="~/Content/bootstrap-3.0.3.min.js"></script>
<script src="~/Content/jquery-2.0.0.min.js"></script>

<!-- ✅ 正確：jquery 在前 -->
<script src="~/Content/jquery-2.0.0.min.js"></script>
<script src="~/Content/bootstrap-3.0.3.min.js"></script>

完整引入模板（含 CSS）

<head>
  <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <!-- Tab 結構 -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="home">...</div>
    <div class="tab-pane fade" id="profile">...</div>
  </div>

  <!-- JS 必須放在 body 結尾，且順序固定 -->
  <script src="~/Content/jquery.min.js"></script>
  <script src="~/Content/bootstrap.bundle.min.js"></script> <!-- 含 Popper -->
</body>

其他可能原因

• 重複引入 jQuery：頁面中出現兩次 jquery.min.js，導致事件綁定丟失。
• Bootstrap 版本不匹配：v3 用 data-toggle="tab"，v4/v5 用 data-bs-toggle="tab"，混用會失效。
• Tab 結構缺少 role="tablist"/role="tabpanel"：無障礙屬性缺失可能影響某些版本初始化。

快速自檢清單

1. Console 無 $ is not defined 或 .tab is not a function 錯誤。
2. Network 面板確認 jQuery → Bootstrap.js 載入順序正確。
3. HTML 結構符合官方範例（.nav-tabs + .tab-content + href="#id" 對應 id="id"）。

調整載入順序後，Tab 切換即可正常工作，無需額外撰寫 JS 代碼。