添加 Active 活动类到当前元素

---

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

---

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

1 2 3 4 5 亲自试一试 »

---

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";
  });
} 亲自试一试 »