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

Question

我有一组锚标记，我正在通过 forEach 方法向其添加活动 class。当我将活动 class 添加到一个锚标签时，我如何获得它，它会从所有其他锚标签项目中删除此活动 class？

我也必须有它，所以第一个锚标记以一个活动的 class 开头（我通过 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 然后在函数中只是从每个中删除 class 然后添加 class.

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，您可以使用几行代码来完成此操作。

原版 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 3

我创建了将在单击事件中调用的第二个函数。该函数搜索 class 活动的项目并删除 class.

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>

Answer 4

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

我只在你原来的代码中加了下面三行代码就实现了你想要的。

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>

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

Remove Class From All Elements Except Active Element

javascript

css

foreach

this