Bootstrap按钮保持激活状态至另一按钮被点击的实现方法

这个问题我之前也碰到过！原因在于你可能只是单纯给按钮加了active类，但没有利用Bootstrap按钮组的单选表单控件绑定机制，导致点击页面空白处时，按钮的激活状态没有持久化的依据，就被移除了。下面给你两种解决方案，优先推荐第一种，更符合Bootstrap的原生设计：

方案一：使用Radio输入框配合按钮组（推荐） #

Bootstrap的按钮组想要实现「单选且激活状态持久」，最佳实践是配合type="radio"的输入框，利用表单控件的单选特性来保持选中状态，这样点击空白处也不会取消激活。修改后的HTML结构如下：

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Button Group</title>
</head>
<body>
  <div class="btn-group" role="group" aria-label="Region selector" data-bs-toggle="buttons">
    <!-- 默认激活的Europe选项，radio加checked，label加active -->
    <input type="radio" class="btn-check" name="region" id="europe" autocomplete="off" checked>
    <label class="btn btn-primary active" for="europe">Europe</label>

    <input type="radio" class="btn-check" name="region" id="america" autocomplete="off">
    <label class="btn btn-primary" for="america">America</label>

    <input type="radio" class="btn-check" name="region" id="asia" autocomplete="off">
    <label class="btn btn-primary" for="asia">Asia</label>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键说明： #

• 所有radio输入框的name属性必须相同，这样才能实现单选逻辑
• 默认激活的选项要给radio加checked，同时给对应的label加active类（保持初始视觉一致）
• data-bs-toggle="buttons"会让Bootstrap自动同步radio的选中状态和label的active类，点击空白处时radio的选中状态不会改变，所以激活状态也会保留

方案二：用JavaScript阻止空白处移除激活状态（适合不想改HTML结构的情况） #

如果你不想调整HTML结构，也可以通过监听页面点击事件，判断点击目标是否属于按钮组，只有点击其他按钮时才切换激活状态，点击空白处则不做处理：

// 获取按钮组和所有按钮
const btnGroup = document.querySelector('.btn-group');
const buttons = btnGroup.querySelectorAll('.btn');

// 页面点击事件监听
document.addEventListener('click', function(e) {
  // 如果点击的不是按钮组里的按钮，直接返回，不修改激活状态
  if (!btnGroup.contains(e.target)) return;
  
  // 如果点击的是按钮，移除所有按钮的active类，给当前点击的按钮加上
  buttons.forEach(btn => btn.classList.remove('active'));
  e.target.classList.add('active');
});

注意： #

• 这种方式需要确保你的按钮组有统一的类名（比如.btn-group），按钮都是.btn类
• 要移除原来Bootstrap可能自带的data-bs-toggle="buttons"属性，避免和自定义JS冲突

这样修改后，不管点击页面哪里，只要没点其他按钮，当前激活的按钮就会一直保持激活状态啦！

内容的提问来源于stack exchange，提问作者Jon Dier