替代解决方案：关注多个按钮

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

你能试试把这个换成： $(".tbl-button:focus").addClass("table-btn-color");

由此 $( document.activeElement ).addClass("table-btn-color");

Answer 2

您只需将 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");
});

为了在所选元素上保留 class，您可以这样做：

$(".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");
})

替代解决方案：关注多个按钮

Alternative solution for :focus on multiple buttons

javascript

safari

jquery

focus

button