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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======HOW TO======
<WRAP left notice 80%>
  * description : How to add active class to current element
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-07
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/howto/howto_js_active_element.asp|How to add active class to current element]]\\
\\
%%JavaScript%%를 사용하여 현재 요소에 액티브 클래스를 추가하는 방법을 학습합니다.\\
\\
현재 눌려있고 활성화된 버튼을 강조표시합니다.\\
<code css>
<!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>
</code>
=====Active Element=====
Step 1) Add %%HTML%%\\
<code 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>
</code>
\\
Step 2) Add %%CSS%%\\
<code 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;
}
</code>
\\
Step 3) Add %%JavaScript%%\\
<code 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";
  });
}
</code>
\\
시작할 버튼 요소에 액티브 클래스가 설정되지 않은 경우, 하기 코드를 사용합니다.\\
<code javascript>
<!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>
</code>
 
{{tag>오션, How to add active class to current element,}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
