Альтернативное решение для: фокус на нескольких кнопках

Question

Я пытаюсь найти другое решение для :focus при нажатии на кнопку, поскольку Safari не поддерживает: фокус на кнопках .

У меня есть поле из 16 кнопок, которое должно менять цвет при нажатии на него и терять при нажатии другой кнопки.

Я создал эту скрипку , чтобы показать события. 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-кнопка: фокус. ") AddClass (" стол-БТН-цвет");

.

этим $ (document.activeElement) .addClass ("table-btn-color");