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”）;

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

2 个答案: