HOW TO

description : How to add active class to current element
author : 오션
email : shlim@repia.com
lastupdate : 2021-04-07

Ref

How to add active class to current element

JavaScript를 사용하여 현재 요소에 액티브 클래스를 추가하는 방법을 학습합니다.

현재 눌려있고 활성화된 버튼을 강조표시합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        .btn {
            border: none;
            outline: none;
            padding: 10px 16px;
            background-color: #f1f1f1;
            cursor: pointer;
            font-size: 18px;
        }
        /* Style the active class, and button on mouse-over */
        .active, .btn:hover {
            background-color: #666;
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>Active Button</h1>
    <p>Highlight the active/current (pressed) button.</p>
    <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>
    <script>
        // Add active class to the current button (highlight it)
        var header = document.getElementById("myDIV");
        var btns = header.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";
            });
        }
    </script>
</body>
</html>

Active Element

Step 1) Add 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>

Step 2) Add 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;
}

Step 3) Add JavaScript

// Get the container element
var btnContainer = document.getElementById("myDIV");
 
// Get all buttons with class="btn" inside the container
var btn = 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";
  });
}

시작할 버튼 요소에 액티브 클래스가 설정되지 않은 경우, 하기 코드를 사용합니다.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Style the button */
        .btn {
            border: none;
            outline: none;
            padding: 10px 16px;
            background-color: #f1f1f1;
            cursor: pointer;
            font-size: 18px;
        }
        /* Style the active class, and buttons on mouse-over */
        .active,.btn:hover {
            background-color: #666;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Active Button</h1>
    <p>Highlight the active/current (pressed) button.</p>
    <div id="myDIV">
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn">4</button>
        <button class="btn">5</button>
    </div>
    <script>
        // Add active class to the current button (highlight it)
        var header = document.getElementById("myDIV");
        var btns = header.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";
            });
        }
    </script>
</body>
</html>

오션,, How, to, add, active, class, to, current, element,

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

HOW TO

Ref

Active Element

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

HOW TO

Ref

Active Element

문서 도구