从活动元素之外的所有元素中删除类

Question

我有一组锚标记，我正在通过forEach方法向其中添加一个活动类。当我将活动类添加到一个锚定标签时，如何将其从所有其他锚定标签项中删除呢？

我还必须拥有它，以便第一个锚标记以其上的活动类开头（这是我通过CSS完成的）

代码笔：https://codepen.io/emilychews/pen/gOaXdMr

var tabLink = document.querySelectorAll('.tab-link'),
    tabPane = document.querySelectorAll('.tab-pane')

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        item.classList.add('active')
    }, false)

})

.nav-tabs {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    list-style: none;
    background: lightblue;
}

.tab-link {
    margin-left: 4rem;
    padding: 1rem;
    border-radius: 1px;
    transition: .2s;
    display: block;
}

.tab-link.active {
    background: white;
}

<ul class="nav-tabs"role="tablist">
    <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
    <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
    <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>

Answer 1

所以基本上只是给每个ID赋予不同的ID，然后在函数中只是从每个ID中删除该类，然后添加该类。

var tabLink = document.querySelectorAll('.tab-link'),
    tabPane = document.querySelectorAll('.tab-pane')

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        document.getElementById('a').classList.remove('active');
        document.getElementById('b').classList.remove('active');
        document.getElementById('c').classList.remove('active');
        item.classList.add('active')
    }, false)

})

.nav-tabs {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    list-style: none;
    background: lightblue;
}

.tab-link {
    margin-left: 4rem;
    padding: 1rem;
    border-radius: 1px;
    transition: .2s;
    display: block;
}

.tab-link.active {
    background: white;
}

<ul class="nav-tabs"role="tablist">
    <li role="presentation"><a id='a' class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
    <li role="presentation"><a id='b' class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
    <li role="presentation"><a id='c' class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>

Answer 2

如果使用jQuery，则可以使用几行代码来完成。

Vanilla JS

var tabLink = document.querySelectorAll('.tab-link');

tabLink.forEach(function(item){

    item.addEventListener('click', function(){

        tabLink.forEach(function(tabs) {
          tabs.classList.remove('active');
        });

        item.classList.add('active');
    }, false)

})

jQuery

$(document).on('click', '.tab-link', function(){
  $('.tab-link').removeClass('active'); // remove active for all first.
  $(this).addClass('active'); // add active for clicked element
})