在使用 Bootstrap 的 nav-tabs 和 tab-content 元件時，頁面中的切換選單無法正常響應切換事件，可能是因為以下幾點問題：
1. 缺少 Bootstrap 的 JavaScript 檔案：Bootstrap 的 tab 切換功能依賴 JavaScript，如果沒有引入 bootstrap.bundle.min.js，切換事件不會生效。（常識問題）
2. tab-content 內 tab-pane 的 id 使用方式：data-bs-target 和 tab-pane 的 id 中不需要 # 符號。data-bs-target 應該直接引用 id，而不是帶有 # 符號的字串。（粗心問題）
修改建議
以下是對程式碼的調整：
1. 確保引入 Bootstrap 的 JavaScript 檔案
在 HTML 檔案中，確保在 <head> 或頁面底部引入 Bootstrap 的 JavaScript 檔案：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
2. 修復 data-bs-target 和 id 的使用方式
修改 data-bs-target 和 tab-pane 的 id 中的 # 符號，改為直接使用 id 名稱。例如下面的例子中，如果把id寫為「#nav-home」就會出問題，一定要小心，下面是正確的舉例。
<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true"> Home </button> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div> </div>
解釋
• 移除 # 符號：將 data-bs-target 和 tab-pane 的 id 直接設定為字串拼接的結果，不帶 # 符號。
• Bootstrap JavaScript 檔案：確保正確引入了 Bootstrap 的 JavaScript 依賴。
應用以上調整後，應該能正常響應切換事件。如果依然存在問題，可以檢查瀏覽器控制檯是否有報錯資訊
