Html 单击其他位置后，如何使按钮保持焦点状态？

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

@媒体屏幕和最小宽度：768px{ .过滤器组包装{ 显示器：flex； 证明内容：之间的空间； } } .btn{ 宽度：60px； 高度：60px； 背景尺寸：封面； 显示：内联块； 边界半径：30px； -webkit边界半径：30px； -moz边界半径：30px； 填充：0px； 垫面：5px； 文本对齐：居中； 线高：130px； 利润率：10px； 边际上限：0px； 边缘底部：35px； 颜色：888888； 字号：1em； 过渡：放松； 光标：指针； 边界：无； 字体大小：.8em； } @媒体-moz touch已启用：0，指针：良好{ .btn:悬停{ 颜色：中交； } } .btn:焦点{ 大纲：无； 盒影：2px1px4px1pRGBA75,75,75,1； } @媒体屏幕和最大宽度：767px{ .btn{ } } A. B C

---

您可以使用jquery在单击按钮时为按钮分配一个活动类，而不是使用focus属性。 如果用户单击任意位置，按钮将保持活动状态

检查下面的代码

$(".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;
}

---

希望能有所帮助。

焦点状态以您上面描述的方式与浏览器配合使用，但您可以使用jquery或纯JS进行尝试

定义一个保存所需焦点状态的css类，并在类过滤器选项的子按钮上切换该类

我想在这里向你道歉，以防万一

   .active {
     background: yellow;
     border: 1px solid black;
     outline-style: solid;
     outline-color: red;
     outline-width: thin;
    }



    @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 {
      }
    }
A.
B
C
谢谢大家的建议。我能学到足够的东西使它工作。出于某种原因，类“active”是一个问题，我必须将该函数分配给“button”以使其工作。我不知道为什么，但它现在起作用了，所以我不怀疑它


$button.clickfunction{
$button.removeClasspressed；
$this.addClasspressed；
};你不能用简单的CSS来实现这一点。这一次你需要JavaScript。这对我来说不太合适，但我可以修改它，使其工作得非常好，以查看我的答案。谢谢你，你挽救了这一天。我很高兴这有帮助。如果您认为我的答案有助于解决您的问题，请单击“检查图标”。