如何 - 為當前元素新增 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";
});
}
自己動手試一試 »
