html - 如何使焦点属性保持不变，直到我单击另一个按钮

Question

我正在寻找一种方法来使“焦点”属性保持不变，直到我单击其他按钮之一。

通常，即使我点击其他任何地方，焦点也会消失，但我需要它保持不变，除非我只点击其他按钮之一。

也接受包含 JavaScript 的解决方案，但前提是不使用库。

button:focus {
  color: red
}

<div class="example">
  <button>button 1</button>
  <button>button 2</button>
  <button>button 3</button>
  <button>button 4</button>
</div>

Answer 1

$("button").focusin(function(){
    $('button').css('color',''); // Remove Before set color to selected button
    $(this).css("color", "red"); // Set Color to Selected Button
});

button:focus {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
  <button>button 1</button>
  <button>button 2</button>
  <button>button 3</button>
  <button>button 4</button>
</div>