Bootstrap 5点击按钮设置active状态失效问题求助

问题根源 #

1. 页面跳转导致类丢失：按钮被包裹在<a>标签内，点击会触发页面刷新，JS添加的active类还未生效就被重置。
2. 样式优先级不足：自定义的active样式可能被Bootstrap默认样式覆盖。

解决方案 #

方案1：修复现有代码（阻止跳转+提升样式优先级）

修改JavaScript代码

阻止<a>标签的默认跳转行为，同时优化类切换逻辑：

document.addEventListener("DOMContentLoaded", function() {
  const buttons = document.querySelectorAll('#notes, #tasks');

  buttons.forEach(btn => {
    btn.addEventListener('click', function(e) {
      // 阻止页面跳转
      e.preventDefault();
      // 移除所有按钮的active类
      buttons.forEach(b => b.classList.remove('active'));
      // 为当前按钮添加active类
      this.classList.add('active');
    });
  });
});

增强CSS样式优先级

在main.css中添加更具体的选择器，确保active样式能覆盖Bootstrap默认：

.btn.btn-outline-light.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2); /* 可根据需求调整背景色 */
  border-color: #ffffff;
}

方案2：使用Bootstrap原生Tab组件（更简便）

直接利用Bootstrap内置的nav-tabs组件，无需自定义JS，原生支持切换样式：

<div class="d-flex">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" id="notes-tab" data-bs-toggle="tab" href="#notes-content">Notes</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tasks-tab" data-bs-toggle="tab" href="#tasks-content">Tasks</a>
    </li>
  </ul>
</div>

<!-- 对应内容区域 -->
<div class="tab-content mt-3">
  <div class="tab-pane fade show active" id="notes-content">笔记展示区域</div>
  <div class="tab-pane fade" id="tasks-content">任务展示区域</div>
</div>

该方案自动处理active类切换和样式，无需额外JS代码。

内容的提问来源于stack exchange，提问作者karuna vimal