Изменение фона кнопок в меню навигации

Question

Изменение фона кнопок в меню навигации

Рейтинг: 0Ответов: 0Опубликовано: 06.02.2023

Как сделать так, чтобы в меню навигации при нажатии на кнопки или ссылки, цвет позади кнопки менял цвет пока я не нажму на другую?

Пробовал сделать через active, фон позади кнопки менялся в момент нажатия, через visited эффект при нажатии на другую кнопку не проходил.

Потом нашел код js который будет выделять указанную мне кнопку, а при нажатии на другую, выделение прошлой убирается и появляется на нужной мне. Можно ли сделать это через html css? И правильно ли я написал js?

Пример1

document.addEventListener('click', (e) => {
  if (e.target.classList.contains("knopki")) {
    let el = document.querySelector('.active')
    el && el.classList.remove('active')
    e.target.classList.add('active')
  }
});

.spisok {
  list-style-type: none;
}

.knopki {
  margin-top: 15px;
  padding-top: 15px;
}

ul li {
  font-size: 20px;
}

a {
  text-decoration: none;
}

.knopki1:active {
  background-color: green;
}

<nav>
  <ul class="spisok">
    <div class="knopki1">
      <li class="knopki"><a href="">Главная</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Памятка</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Терапия Игорёшки</a>
      </li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Становление 
иррационального рационалиста</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="C:\program1\kniga_khuli_epta_nahui\html\logosh.html">Ошибки в 
мышлении</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Манипуляции</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Экономика</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Мысли Игорёшки</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Мысли других</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Послания плохого 
 Игорёшки</a></li>
    </div>
    <div class="knopki1">
      <li class="knopki"><a href="">Заключение</a></li>
    </div>
  </ul>
</nav>

css javascript html

Источник: Stack Overflow на русском

Изменение фона кнопок в меню навигации

Ответы