Как сделать - Добавить активный класс к текущему элементу
Узнать, как добавить активный класс к текущему элементу с помощью 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");
// Сделать все кнопки с class="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";
});
}
Редактор кода »
Если у вас нет активного класса, установленного на элементе button для начала, используйте следующий код:
Пример
// Получить элемент контейнера
var btnContainer = document.getElementById("myDIV");
// Сделать все кнопки с class="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";
});
}
Редактор кода »
