在 Bootstrap 5 中为 设置 active 状态失败，根本原因是按钮被 标签包裹且含 href 属性，导致点击后页面跳转、DOM 重载，无法保留 CSS 类；需阻止默认行为或重构为纯前端路由逻辑。 在 Bootstrap 5 中为 `` 设置 `active` 状态失败，根本原因是按钮被 `` 标签包裹且含 `href` 属性，导致点击后页面跳转、DOM 重载，无法保留 CSS 类；需阻止默认行为或重构为纯前端路由逻辑。要使 Bootstrap 5 的按钮在点击时正确显示 active 状态，关键在于理解 页面导航与 DOM 状态持久性之间的冲突。你当前的 HTML 结构如下： 标签的 href 会触发完整页面跳转（如从 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 到 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Tasks），浏览器加载新页面后，JavaScript 初始化和 active 类将被重置——因此无论 JS 逻辑多么完善，视觉效果都无法持续。✅ 正确解决方案（二选一）方案一：阻止默认跳转 + 前端状态管理（适合单页应用雏形）若暂不引入框架（如 Reacthttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Vue），可使用 event.preventDefault() 并配合手动路由模拟（例如更新 URL Hash 或使用 history.pushState）：document.addEventListener("DOMContentLoaded", function() { const notesButton = document.getElementById('notes'); const tasksButton = document.getElementById('tasks'); https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 公共激活函数 const setActive = (activeBtn, inactiveBtn) => { activeBtn.classList.add('active'); inactiveBtn.classList.remove('active'); }; notesButton.addEventListener('click', function(e) { e.preventDefault(); setActive(notesButton, tasksButton); https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 可选：模拟导航（不刷新页面） history.pushState({ page: 'notes' }, '', 'https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712'); }); tasksButton.addEventListener('click', function(e) { e.preventDefault(); setActive(tasksButton, notesButton); history.pushState({ page: 'tasks' }, '', 'https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Tasks'); }); });⚠️ 注意事项：Bootstrap 5 的 .btn-outline-* 按钮默认不响应 .active 类的样式变化，需确保你的自定义 CSS 或 Bootstrap 主题已启用该支持。推荐显式添加样式增强兼容性：https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* styleshttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712main.css *https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 .btn-outline-light.active, .btn-outline-light:active { color: #fff !important; background-color: #0d6efd !important; border-color: #0d6efd !important; }若使用 Bootstrap 官方「Nav」组件（如 ），应优先采用其内置逻辑（如 data-bs-toggle="tab"），而非手动操作 active 类。方案二：重构为语义化导航（推荐用于多页站点）若实际需要真实页面跳转（即 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712 和 https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Tasks 是独立后端路由），则不应依赖客户端 JS 维持 active 状态，而应在服务端或构建时根据当前 URL 动态渲染 active 类：