香草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。