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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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