$("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>

注意：我假设你有先进的理解React在这里，如果你需要更多的解释，然后请评论！
如果使用REACT，则可以执行以下操作：
1.Map一个数组，该数组将创建按钮：
常量按钮Arr =[“按钮1”、“按钮2”等]
1.通过MAP方法返回按钮：
（buttonArr.map（el，idx）=〉{返回〈按钮{el} /按钮〉}）
1.创建状态以保持所选按钮的索引：
常量[活动索引，设置活动索引] =React使用状态（0）;
1.在按钮中创建ONCLICK，设置被点击按钮的索引：
onClick={（）=〉设置活动索引（idx）}
1.在按钮内部创建IF条件MAP迭代的IF索引与状态索引匹配，然后应用类
〈按钮类别名称={活动索引=== idx？“类别名称1”：“类名称2”}
或者，你可以使用React导航条库，它会给点击的元素添加ACTIVE类，但是你必须设置React路由器基础设施，这对于像这样的小任务来说是不值得的。