如何 - 将活动类添加到当前元素

了解如何使用 JavaScript 将活动类添加到当前元素。

突出显示活动/当前（按下）按钮：

活性元素

步骤1）添加HTML：

示例

步骤2）添加CSS：

示例

/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
}

/* Style the active class (and buttons on mouse-over) */
.active, .btn:hover {
background-color: #666;
color: white;
}

步骤 3) 添加 JavaScript：

示例

// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
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";
});
}

亲自试一试 »

如果您没有在按钮元素上设置活动类来开始，请使用以下代码：

示例

// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
});
}

亲自试一试 »