Нужно, чтобы при нажатии на кнопку менялся ее стиль, а именно - появлялось подчеркивание (и сохранялось). Сначала пыталась схитрить и через :active и свойство transition: 999999s все провернуть, но нужно, чтобы при нажатии на соседнюю кнопку стиль предыдущей возвращался в дефолт. Вопрос знатокам - как? сss/js - не важно. Можно просто ткнуть меня в нужную документацию, буду рада и этому.
.x:focus{text-decoration: underline 5px red;}<input type='button' value='ok' class='x'>
<input type='button' value='ok' class='x'>
<input type='button' value='ok' class='x'>после клика по кнопке, каретка фокуса остается на ней до любого клика мимо неё.
а вообще...
нужно, чтобы при нажатии на соседнюю кнопку стиль предыдущей возвращался в дефолт
может <input type='radio'> и <label>?
Добавьте кнопке класс "selected", который будет отвечать за подчеркивание.Назначьте обработчик события "click" для кнопки. Внутри обработчика события используйте метод toggle() класса classList для добавления или удаления класса "selected" у кнопки. Добавьте слушатель события click на все кнопки, и внутри обработчика события используйте метод remove() класса classList у всех кнопок, кроме нажатой.
CSS:
.selected {
text-decoration: underline;
}
JS:
const buttons = document.querySelectorAll("button");
buttons.forEach(button => {
button.addEventListener("click", event => {
buttons.forEach(b => b.classList.remove("selected"));
event.target.classList.toggle("selected");
});
});
Этот код позволит вам добавлять и удалять класс "selected" у кнопки при клике на нее, а также удалять класс у других кнопок. При этом вам не понадобится свойство transition и состояние :active.
Либо назначьте обработчик события "click" для кнопки. В JavaScript добавьте слушатель события на каждую кнопку и обработчик события, который будет добавлять и удалять класс "selected" у кнопки при клике:
const buttons = document.querySelectorAll("button");
buttons.forEach(button => {
button.addEventListener("click", function(){
this.classList.toggle("selected");
});
});
Добавьте слушатель события click на все кнопки, и внутри обработчика события используйте метод remove() класса classList у всех кнопок кроме нажатой:
const buttons = document.querySelectorAll("button");
buttons.forEach(button => {
button.addEventListener("click", function(){
buttons.forEach(b => b.classList.remove("selected"));
this.classList.add("selected");
});
});