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

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

如果您使用jQuery，您只需几行代码即可完成此操作。

原版 JS

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

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        document.querySelector('.active').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
})

Answer 2

在 click 事件监听器中，您可以简单地从 .tab-link 内的所有子元素中删除所有活动类，然后将最后一个活动类添加到单击的元素。

我只在您的原始代码中添加了以下三行代码来实现您想要的。

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

tabLink.forEach(function(item){
    item.addEventListener('click', function(){
        tabLink.forEach(function(item) {
          item.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 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 3

所以基本上只是给每个不同的 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 4

我创建了第二个函数，它将在点击事件中被调用。该函数搜索具有活动类的项目并删除该类。

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

function clearActiveItemMenu(){
	tabLink.forEach(function(item){
  	if(item.classList.contains('active')){
    	item.classList.remove('active');
    }
  });
}

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        clearActiveItemMenu();
        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>