如何使搜索过滤按钮点击页面其他区域后保持选中状态？

你说得对，CSS的focus属性确实不适合用来做这种需要持久保留的选中状态——因为当元素失去焦点（比如点击页面其他地方）时，focus状态就会消失，这就是你遇到的核心问题。我们可以改用自定义CSS类结合jQuery来实现需求，确保始终有一个按钮处于选中状态，而且状态不会轻易丢失。

下面是具体的解决方案：

第一步：修改CSS样式 #

把原来依赖focus的样式换成一个自定义的类（这里用.active，刚好Bootstrap也有这个类的基础样式，你可以直接复用或自定义）：

@media screen and (min-width: 768px) { 
  .filters-group-wrap { 
    display: flex; 
    justify-content: space-between; 
  } 
}
.btn { 
  width: 60px; 
  height: 60px; 
  background-size: cover; 
  display: inline-block; 
  border-radius: 30px; 
  -webkit-border-radius: 30px; 
  -moz-border-radius: 30px; 
  padding: 0px; 
  padding-top: 5px; 
  text-align: center; 
  line-height: 130px; 
  margin: 10px; 
  margin-top: 0px; 
  margin-bottom: 35px; 
  color: #888888; 
  font-size: 1em; 
  transition: .2s ease-out; 
  cursor: pointer; 
  border: none; 
  font-size: .8em; 
}
@media (-moz-touch-enabled:0),(pointer: fine) { 
  .btn:hover { 
    color:#CCCCCC; 
  } 
}
/* 替换原来的.btn:focus，用.active类定义持久选中状态 */
.btn.active { 
  outline: none; 
  box-shadow: 2px 1px 4px 1px rgba(75,75,75,1); 
  /* 可以额外加样式强化选中视觉，比如改变文字颜色 */
  color: #fff;
}
@media screen and (max-width: 767px) { 
  .btn { } 
}

第二步：设置初始选中状态 #

在HTML里给默认选中的按钮加上.active类（比如第一个按钮），确保页面加载时就有一个选中项：

<div class="filter-options" data-toggle="buttons">
<button id="showA" class="btn active" data-group="groupA" style="background-image: url('A.jpg')">A</button>
<button id="showB" class="btn" data-group="groupB" style="background-image: url('B.jpg')">B</button>
<button id="showC" class="btn" data-group="groupC" style="background-image: url('C.jpg')">C</button>
</div>

第三步：用jQuery控制选中状态切换 #

因为你用了Bootstrap，jQuery应该已经引入了，只需要添加这段简单的代码即可：

$(document).ready(function() {
  // 给所有过滤按钮绑定点击事件
  $('.filter-options .btn').click(function() {
    // 先移除所有按钮的active类，确保只有一个选中项
    $('.filter-options .btn').removeClass('active');
    // 给当前点击的按钮添加active类
    $(this).addClass('active');
  });
});

代码说明： #

• $(document).ready()确保页面元素加载完成后再执行代码，避免找不到元素的问题
• 点击任意按钮时，先清空所有按钮的选中状态，再给当前点击的按钮加上选中状态，保证始终只有一个按钮处于选中状态
• 因为用的是CSS类，不管点击页面其他什么地方，这个类都不会消失，用户能一直看到当前选中的过滤条件

这样修改后，你的过滤按钮就能保持持久的选中状态，完全解决之前的问题啦。如果需要根据选中的按钮来处理过滤逻辑，还可以在点击事件里添加对应的代码（比如获取data-group的值来筛选内容）。

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