Vanilla JS - 子要素のクラスを追加/削除できますが、すべてアクティブです

Question

子要素のクラスを追加および削除できますが、すべてアクティブです。私は&を一度に1つのアクティブな要素にのみ追加しようとしています。私は何が欠けていますか？

<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です。