повесить\забрать класс active на JS

237

29 октября 2017, 21:08

Господа, задача простая: повесить\забрать класс с массива ссылок. Нашёл код, где не пойму какую роль играет в while el

let elements = document.getElementsByClassName("maneMenu"); 
for (let i = 0; i < elements.length; i++) { 
  elements[i].onclick = function() { 
    let el = elements[0]; 
    while (el) { 
      // вот здесь туплю 
      if (el.tagName === "A") { 
        el.classList.remove("active"); 
      } 
      el = el.nextSibling; 
    } 
    this.classList.add("active"); 
  } 
}

<div class="icon-bar wrapper_menu"> 
  <a class="maneMenu" href="#"></a> 
  <a class="maneMenu" href="#"></a> 
  <a class="maneMenu" href="#"></a> 
</div>

Можете подсказать другие варианты реализации на JS?

Answer 1

let elements = document.getElementsByClassName("maneMenu"); 
for (let i = 0; i < elements.length; i++) {/*прокручиваем в цикле все элементы*/ 
  elements[i].addEventListener('click', function() {  /*при клике на элемент  
 */ 
    for (let i = 0; i < elements.length; i++) { 
      elements[i].classList.remove('active'); /*удаляем у всех class active*/ 
    } 
    this.classList.add('active');/*добавляем class active по которому кликнули */ 
  }) 
}

.active { 
  color: green; 
}

<div class="icon-bar wrapper_menu"> 
  <a class="maneMenu" href="#">1111</a> 
  <a class="maneMenu" href="#">2222</a> 
  <a class="maneMenu" href="#">3333</a> 
</div>