С помощью цикла for я удалил активный класс внутри тега a. Однако когда я хочу добавить класс при щелчке, ничего не происходит, и класс добавляется в теги li и a, но без имени активного класса.

Это спрашивали столько раз, но я все еще не могу понять. Любая помощь будет принята с благодарностью. Спасибо!

Здесь приведен пример: https://jsfiddle.net/fu5e7946/

Pascal Schmidt

Ответов: 2

Ответы (2)

По сути, вы дважды зацикливаетесь внутри своего цикла. Я исправил это. Вам просто нужно удалить предыдущий активный класс и добавить новый следующим образом:

  document.querySelector(".sidenav a.active-list").classList.remove("active-list");
    e.target.classList.add('active-list');

Вы можете сделать следующее: codepen:link https://codepen.io/emmeiWhite/pen/jOMZRxd

let elements = document.querySelectorAll('div, ul, li, a');

elements.forEach(i => {
  i.addEventListener('click', function(e) {
    document.querySelector(".sidenav a.active-list").classList.remove("active-list");
    e.target.classList.add('active-list');
    
  });
});
.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  overflow-x: hidden;
}

.sidenav ul {
  цвет фона: черный;
  list-style: none;
  padding: 0px;
  padding-right: 0px;
}

.sidenav > ul > li {
  цвет: белый;
  margin: 0px;
}

.sidenav a {
  text-decoration: none;
  font-size: 18px;
  display: block;
  line-height: 4em;
  цвет: белый;
  background-color: black;
}

.sidenav a:hover {
  цвет: серый;
}

.sidenav .active-list {
  background-color: #e2c9be;
  цвет: черный;
}
 

Попробуйте с помощью toggle (подробнее: MDN). У вас есть рабочий пример:

let elements = document.querySelectorAll('div, ul, li, a');

elements.forEach(i => {
  i.addEventListener('click', function() {
    i.classList.toggle('active-list');
  });
});
.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  overflow-x: hidden;
}

.sidenav ul {
  цвет фона: черный;
  list-style: none;
  padding: 0px;
  padding-right: 0px;
}

.sidenav > ul > li {
  цвет: белый;
  margin: 0px;
}

.sidenav a {
  text-decoration: none;
  font-size: 18px;
  display: block;
  line-height: 4em;
  цвет: белый;
  background-color: black;
}

.sidenav a:hover {
  цвет: серый;
}

div ul li a.active-list {
  background-color: #e2c9be;
  цвет: черный;
}

2022 WebDevInsider