javascript - :focus on multiple buttons 的替代解决方案

Question

当单击按钮时，我正在努力寻找 :focus 的不同解决方案，如 Safari doesn't support :focus on buttons 。

我有一个包含 16 个按钮的字段，单击它时应该改变颜色，单击不同的按钮时应该松开它。

我创建了this fiddle显示事件。 toggleClass 不是正确的解决方案，希望避免 :focus。

当前 JS 代码:

$(".tbl-button").on("click", function() {
        $(".tbl-button:focus").addClass("table-btn-color");
});

Answer 1

您只需将 css 声明从 .table-btn-color 更改为 .tbl-button:active 即可。

但是如果你想使用 jQuery，你可以这样做

$(".tbl-button").on("mousedown", function() {
  $(this).addClass("table-btn-color");
}).on('mouseup', function(){
  $(this).removeClass("table-btn-color");
});

为了保留所选元素上的类，您可以这样做:

$(".tbl-button").on("mousedown", function() {
  // remove the class form all .tbl-button elements
  $(".tbl-button").removeClass("table-btn-color");
  // add it to the currently pressed element
  $(this).addClass("table-btn-color");
})