如何 - 为当前元素添加 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 类（以及鼠标悬停时的按钮）*/
.active, .btn:hover {
background-color: #666;
color: white;
}
步骤 3) 添加 JavaScript
示例
// 获取容器元素
var btnContainer = document.getElementById("myDIV");
// 获取容器中所有 class="btn" 的按钮
var btns = btnContainer.getElementsByClassName("btn");
// 循环遍历按钮，并为当前/已单击的按钮添加 active 类
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";
});
}
自己动手试一试 »
如果您在按钮元素上尚未设置 active 类，请使用以下代码
示例
// 获取容器元素
var btnContainer = document.getElementById("myDIV");
// 获取容器中所有 class="btn" 的按钮
var btns = btnContainer.getElementsByClassName("btn");
// 循环遍历按钮，并为当前/已单击的按钮添加 active 类
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
// 如果没有 active 类
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
// 为当前/已单击的按钮添加 active 类
this.className += " active";
});
}
自己动手试一试 »
