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

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

Answer 2

你可以尝试替换它：$（“。tbl-button：focus”）。addClass（“table-btn-color”）;

通过这个$（document.activeElement）.addClass（“table-btn-color”）;