在使用 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 依赖。
应用以上调整后，应该能正常响应切换事件。如果依然存在问题，可以检查浏览器控制台是否有报错信息
