如何 - 将活动类添加到当前元素
学习如何使用 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 类（以及鼠标悬停时的按钮）添加样式 */
.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";
});
}
自己尝试 »
