Как добавить класс _active на все элементы списка при клике на ul?

Question

Как добавить класс active на все элементы списка при клике на ul?(javascript)

Answer 1

Я бы сделал это так:

var li = document.getElementsByTagName('li')

function changestate() {
  for (let i = 0; i < li.length; i++) {
    li[i].classList.add('active')
  }
}

.active {
  color: blueviolet;
}

<ul onclick="changestate()">
  <li>Яблоко</li>
  <li>Банан</li>
  <li>Абрикос</li>
  <li>Мандарин</li>
  <li>Вопрос без кода на СО</li>
</ul>

Answer 2

Как добавить класс active на все элементы списка при клике на ul?(javascript)

Попробуйте так.

// UL 
ul = document.querySelector('.click2tag');

// Event 
ul.addEventListener('click', function() {
  liTagMe = document.querySelectorAll('.tagMe')
  liTagMe.forEach((li) => li.classList.add('active'))
})

.active {
  color: orange
}

.tagMe {
  /*   Something goes here */
}
/** Clickability **/
.yes {
  color: green;
}

.no {
  color: red;
}

<p class="yes">Clickable</p>
<ul class="click2tag">
  <li class="tagMe">Something 1</li>
  <li class="tagMe">Something 2</li>
  <li class="tagMe">Something 3</li>
  <li class="tagMe">Something 4</li>
</ul>
<p class="no"> Not clickable</p>
<ul>
  <li>Other 1</li>
  <li>Other 2</li>
</ul>

Answer 3

Я, конечно же, не знаю зачем вам это, но предполагаю, что это лишь визуальное (CSS) оформление.
Если так, то я бы не стал насиловать устройство пользователя, переборами всех элементов списка при нажатие на один из них, сделал бы проще:

document.querySelector('ul').addEventListener('click', function(e) { // Вешаем обработчик на список UL
  if(e.target.tagName === 'LI') // Если нажатие на элемент LI
    this.classList.toggle('active'); // То вешаем родителю класс `.active`
})

/* 
  А в CSS уже визуализируем LI элементы "активного" UL
*/

ul.active > li {
  color: green;
}

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

БЛОГ НА HUSL

Как добавить класс _active на все элементы списка при клике на ul?

Ответы (3 шт):