바닐라 JS - 하위 요소에 클래스를 추가/제거 할 수 있지만 모두 활성화되어 있습니다.

Question

하위 요소의 클래스를 추가 및 제거 할 수 있지만 모두 활성화되어 있습니다. 난 한 번에 하나의 활성 요소에만 & 제거를 추가하려고합니다. 내가 뭘 놓치고 있니?

<ul id="parent" class="container"> 
    <li class="child"><a href="#one">one</a></li> 
    <li class="child"><a href="#two">two</a></li> 
    <li class="child"><a href="#three">three</a></li> 
</ul> 


document.addEventListener("DOMContentLoaded", function() { 

    const parent = document.querySelector('#parent'); 
    parent.style.backgroundColor = 'blue'; 
    const childrens = document.querySelectorAll('.child'); 
    const child = document.querySelector('.child a') 

    Array.prototype.forEach.call(
    document.querySelectorAll('.child'), 
    function(element) { 
     element.onclick = addActive; 
    } 
); 

function addActive(element){ 
    element = this; 
    if(element.classList.contains('active')) { 
    element.classList.remove('active'); 
    } else { 
    element.classList.add('active'); 
    } 
} 
}); 

는 여기있다 : codepen

Answer 1

을 지금 당신은 단지 클릭 요소에서 활성 클래스를 추가/제거하고 있습니다. 클릭 한 요소를 활성으로 설정하기 전에 모든 요소에서 클래스를 제거해야합니다.

function addActive(element) { 
    element = this; 
    if (element.classList.contains('active')) { 
    element.classList.remove('active'); 
    } else { 
    childrens.forEach(function(e) { 
     e.classList.remove('active'); 
    }); 
    element.classList.add('active'); 
    } 
} 

Answer 2

하나의 해결책은 첫째 모든 요소에서 active 클래스를 제거하는 것입니다 :

여기

function addActive(element) { 

    childrens.forEach(function(elem) { 
    elem.classList.remove("active"); 
    }); 

    element = this; 
    if (element.classList.contains("active")) { 
    element.classList.remove("active"); 
    } else { 
    element.classList.add("active"); 
    } 
} 

가 working Codepen example이다.