1

Нужно, чтобы при нажатии на кнопку менялся ее стиль, а именно - появлялось подчеркивание (и сохранялось). Сначала пыталась схитрить и через :active и свойство transition: 999999s все провернуть, но нужно, чтобы при нажатии на соседнюю кнопку стиль предыдущей возвращался в дефолт. Вопрос знатокам - как? сss/js - не важно. Можно просто ткнуть меня в нужную документацию, буду рада и этому.

1

2 ответа 2

1

.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>?

1
  • Спасибо! Первый вариант отлично зашел. Я и забыла про фокус.
    – elgreko
    Commented 26 янв. 2023 в 15:47
0

Добавьте кнопке класс "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");
   });
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.