Как сделать так, чтобы кнопка оставалась в своем состоянии фокуса после нажатия в другом месте?

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

Спасибо всем за предложения.Я смог выучить достаточно, чтобы заставить его работать.По какой-то причине класс «активный» был проблемой, и мне пришлось назначить функцию «кнопке», чтобы она работала.Я не знаю почему, но сейчас это работает, поэтому я не ставлю это под сомнение!

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

Answer 3

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    @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 () { $ (Это) .toggleClass ( "активный"); });

Answer 4

Состояние фокуса работает с браузером так, как вы описали выше, но вы можете попробовать это с помощью jquery или чистого JS.

Определите класс css, который содержит желаемое состояние фокуса, и переключите класс на дочерних кнопках класса filter-options.

Хотел бы сюда от вас на всякий случай.