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;
}

希望有帮助。

Answer 2

焦点状态可以通过上述方式与浏览器一起使用，但是您可以使用jquery或纯JS来尝试。

定义一个拥有所需焦点状态的css类，并在类filter-options的子按钮上切换该类。

想从这里过来，以防万一。

Answer 3

   .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 {
      }
    }
    <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>




$("btn").click(function() {
  $(this).toggleClass("active");
});
</script>

Answer 4

感谢大家的建议。我学到了足够的知识才能使它正常工作。由于某种原因，“活动”类是一个问题，我必须将功能分配给“按钮”才能使其正常工作。我不知道为什么，但是现在可以了，所以我没有质疑！

$("button").click(function(){
   $("button").removeClass("pressed");
   $(this).addClass("pressed");
});

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

4 个答案: