Как работать с toggle?

#javascript #css #css3 #html5 #css_animation

Как сделать так, чтобы при добавлении класса active одному элементу, этот класс убирался
из другого(если он имеется). Так как нельзя, чтобы у двух блоков был класс active.
Необходимо, чтобы при клике на один блок, из другого блока убирался класс.
Как это можно сделать?
Вот пример: 



var block = document.getElementsByClassName('block');
for(var i = 0; i < block.length; i++){
  block[i].onclick = function () {
    this.classList.toggle('active');
  }
}
.block{
  width: 100px;
  height: 100px;
  border: 1px solid;
}
.active{
  background-color: red;
}





    

Ответы

Ответ 1

Как вариант:



var block = document.getElementsByClassName('block');
for (var i = 0; i < block.length; i++) {
  block[i].onclick = function() {
    for (var i = 0, max = block.length; i < max; i += 1) {
      block[i].classList.remove('active');
    }
    this.classList.toggle('active');
  }
}
.block {
  width: 100px;
  float: left;
  height: 100px;
  border: 1px solid;
}

.active {
  background-color: red;
}
























Второй вариант:



var block = document.getElementsByClassName('block');
for (var i = 0; i < block.length; i++) {
  block[i].onclick = function() {
    var active = document.querySelector('.active');
    if (active) active.classList.remove('active');

    this.classList.toggle('active');
  }
}
.block {
  width: 100px;
  float: left;
  height: 100px;
  border: 1px solid;
}

.active {
  background-color: red;
}






















Ответ 2

Я хотел бы добавить что такое вполне достижимо без js, в сниппете ниже он для того
чтобы не копи-пастить дивы.

Все что необходимо - атрибут tabindex и селектор :focus



for (var i=0; i<100; i++)
  document.write('
')
.block {
  width: 50px;
  float: left;
  height: 50px;
  margin: -1px -1px 0 0;
  border: 1px solid;
  background-color: white;
}

.block:focus {
  transition: 0.3s;
  outline: none;
  transform:scale(1.2);
  border-radius:17px;
}