Нужно, чтобы при нажатии на кнопку менялся ее стиль, а именно - появлялось подчеркивание (и сохранялось). Сначала пыталась схитрить и через :active
и свойство transition: 999999s
все провернуть, но нужно, чтобы при нажатии на соседнюю кнопку стиль предыдущей возвращался в дефолт. Вопрос знатокам - как? сss/js - не важно. Можно просто ткнуть меня в нужную документацию, буду рада и этому.
-
Может поможет - как раз примерно такой же вопрос был– SwaDCommented 24 янв. 2023 в 20:27
2 ответа
.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>
?
-
Спасибо! Первый вариант отлично зашел. Я и забыла про фокус.– elgrekoCommented 26 янв. 2023 в 15:47
Добавьте кнопке класс "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");
});
});