如何給當前元素添加 active 類

學習如何使用 JavaScript 給當前元素添加 active 類。

高亮顯示活動/當前（已按下）的按鈕：

親自試一試

活動元素

第一步 - 添加 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>

第二步 - 添加 CSS：

/* 設置按鈕的樣式 */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
/* 為 active 類（以及鼠標懸停時的按鈕）設置樣式 */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

第三步 - 添加 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";
  });
}

親自試一試

如果 button 元素一開始沒有設置 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";
  });
}

親自試一試