Здесь вы узнаете как добавить активный класс к текущему элементу при помощи 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";
});
}
