html - 单击其他地方后，如何使按钮保持其焦点状态？

Question

我正在尝试创建一个页面，其中包含一排始终选中一个的搜索过滤器按钮。我面临的问题是，如果在页面的其他地方单击鼠标，明显选中的按钮将恢复为默认状态，用户将无法再看到正在应用哪个搜索过滤器。我正在使用 css focus 属性，也许这是问题的一部分，但我不知道如何实现我想要的。相关代码如下:

@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 {
  outline: none;
  box-shadow: 2px 1px 4px 1px rgba(75,75,75,1);
}

@media screen and (max-width: 767px) {
  .btn {
  }
}

<div class="filter-options" data-toggle="buttons">
  <button id="showA" class="btn" 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>

我使用的是 Bootstrap，所以 jQuery 解决方案还可以，尽管我的理解有限。提前致谢。

Answer 1

除了使用 focus 属性，也许您可​​以使用 jquery 在单击时为按钮分配一个“事件”类。如果用户点击任何地方，该按钮将保持事件状态。

检查下面的代码

$(".btn").click(function(){ // when any button is clicked
   $(".btn").removeClass("active"); //delete all "active" classes from all buttons
   $(this).addClass("active"); //assign the "active" class only to the one that was clicked
   return false;
}

希望对您有所帮助。