在 Bootstrap 5 中为 设置 active 类时，若按钮被包裹在带 href 的 标签内，点击会触发页面跳转，导致 active 状态无法保留；需阻止默认行为或重构结构以确保状态持久生效。
在 bootstrap 5 中为 `
在使用 Bootstrap 5 构建导航栏时，常希望通过 JavaScript 动态控制按钮的 .active 状态（例如“Notes”和“Tasks”切换），但许多开发者发现调用 classList.add('active') 后视觉效果未生效——根本原因在于：按钮被嵌套在具有 href 属性的 <a></a> 标签中，点击即触发页面跳转，DOM 状态尚未渲染便已刷新。
✅ 正确做法：阻止默认跳转 + 手动管理状态
只需在事件监听器中调用 event.preventDefault() 即可阻止 <a></a> 标签的默认导航行为，使 JavaScript 逻辑得以完整执行：
document.addEventListener("DOMContentLoaded", function() {
const notesButton = document.getElementById('notes');
const tasksButton = document.getElementById('tasks');
notesButton.addEventListener('click', function(event) {
event.preventDefault();
notesButton.classList.add('active');
tasksButton.classList.remove('active');
});
tasksButton.addEventListener('click', function(event) {
event.preventDefault();
tasksButton.classList.add('active');
notesButton.classList.remove('active');
});
});⚠️ 注意：Bootstrap 5 的
.btn-outline-light.active样式默认已定义（背景色微变 + 边框加粗），无需额外 CSS —— 但请确保未在自定义样式（如styles/main.css）中意外覆盖.active的background-color或border属性。
? 更优方案：语义化重构（推荐）
若“Notes”与“Tasks”实际对应不同路由（如 / 和 /Tasks），建议分离导航逻辑与 UI 状态管理：
- 使用纯
<button></button>替代<a><button></button></a>嵌套，避免语义混乱； - 通过
window.location.href显式跳转，并在目标页加载时根据当前 URL 激活对应按钮。
示例重构 HTML（更清晰、更符合可访问性规范）：
<div class="d-flex"> <button type="button" class="btn btn-outline-light mx-2" id="notes">Notes</button> <button type="button" class="btn btn-outline-light mx-2" id="tasks">Tasks</button> </div>
配合跳转逻辑（可选）：
notesButton.addEventListener('click', () => {
notesButton.classList.add('active');
tasksButton.classList.remove('active');
window.location.href = '/';
});
tasksButton.addEventListener('click', () => {
tasksButton.classList.add('active');
notesButton.classList.remove('active');
window.location.href = '/Tasks';
});? 总结
- ❌ 错误模式：
<a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c"><button>https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c</button></a>→ 点击立即跳转，JS 状态失效； - ✅ 快速修复：添加
event.preventDefault()，保留现有结构； - ✅✅ 长期推荐：改用语义化
<button></button>+ 显式跳转，提升可维护性与无障碍支持； - ✅ 补充技巧：可结合
localStorage或 URL 查询参数，在页面重载后恢复 active 状态，实现真正持久化高亮。
遵循以上任一方式，即可在 Bootstrap 5 中稳定、专业地实现导航按钮的激活态控制。
