현재 요소에 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";
  });
}

亲自试一试

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";
  });
}

亲自试一试