如何创建 - 将 Active 活动类添加到当前元素
了解如何使用 JavaScript 向当前元素添加活动类。
突出显示活动/当前（按下）按钮:
Active 活动元素
步骤 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";
});
}
亲自试一试 »
如果您没有在按钮元素上设置活动类，请使用以下代码:
实例
// 获取容器元素
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";
});
}
亲自试一试 »
