5

Как сделать так, чтобы при добавлении класса 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;
}
<div class="block"></div>
<div class="block"></div>

0

2 ответа 2

8

Как вариант:

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');
  }
}
.box{
  width:320px;
}
.block {
  width: 50px;
  float: left;
  height: 50px;
  border: 1px solid;
}

.active {
  background-color: red;
}
<div class="box">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

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

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');
  }
}
.box {
  width:320px;
}
.block {
  width: 50px;
  float: left;
  height: 50px;
  border: 1px solid;
}

.active {
  background-color: red;
}
<div class="box">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

0
8

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

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

for (var i=0; i<100; i++)
  document.write('<div class="block" tabindex="1"></div>')
.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;
}

3
  • Интересное решение... Никогда не думал о focus-E в такой реализации....
    – Air
    4 авг 2019 в 9:08
  • @Air :focus вообще очень удобная штука, я уже писал ответы подобного характера, но сейчас наверное уже не найду 4 авг 2019 в 9:10
  • Кто ищет, тот всегда найдет... -- это просто мысли в слух...)))
    – Air
    4 авг 2019 в 9:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.