повесить\забрать класс 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>

READ ALSO
Как сверстать такую полосу?

Как сверстать такую полосу?

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

244
Почему такое отображение в консоли?

Почему такое отображение в консоли?

1: Создал объект через конструктор и заменил свойство constructor в прототипе

214
Что делает эта строка?

Что делает эта строка?

Хотел бы узнать, что делает эта строка в условии if? Заранее больше спасибо за ответ :)

202
WP: кастомный поиск, передавать дополнительный параметр

WP: кастомный поиск, передавать дополнительный параметр

Задача: реализовать два поиска на одной странице, один поиск ищет в одном типе записей, другой во всех остальных, кроме первогоИспользовать...

259