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