Добавить активный класс к текущему элементу

  alexei 21/01/2022 - 10:05

Здесь вы узнаете как добавить активный класс к текущему элементу при помощи JavaScript.


Подсветка активной/текущей (нажатой) кнопки:

       

Активный элемент

Шаг 1) Добавляем HTML:


<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

Шаг 2) Добавляем CSS:


/* Стиль кнопок */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Стиль активного класса (и кнопки при наведении курсора) */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

Шаг 3) Добавляем JavaScript:


// Получаем контейнерный элемент
var btnContainer = document.getElementById("myDIV");

// Получаем все кнопки с классом "btn" внутри контейнера
var btns = btnContainer.getElementsByClassName("btn");

// Проходим по кнопкам и добавляем активный класс к текущей/нажатой кнопке
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Если при загрузке страницы у вас не добавлен активный класс к элементу, то можно использовать следующий код:


// Получаем контейнерный элемент
var btnContainer = document.getElementById("myDIV");

// Получаем все кнопки с классом "btn" внутри контейнера
var btns = btnContainer.getElementsByClassName("btn");

// Проходим по кнопкам и добавляем активный класс к текущей/нажатой кнопке
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // Если активного класса нет
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Добавляем активный класс к текущей/нажатой кнопке
    this.className += " active";
  });
}