从活动元素之外的所有元素中删除类
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从活动元素之外的所有元素中删除类相关的知识，希望对你有一定的参考价值。
我有一组锚标记，我正在通过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>答案
所以基本上只是给每个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>另一答案
如果使用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
)
以上是关于从活动元素之外的所有元素中删除类的主要内容，如果未能解决你的问题，请参考以下文章
使用 JQuery 从列表中删除除前 N 个元素之外的所有元素
[ jquery 文档处理 empty() remove([expr]) detach([expr]) ] 此方法用于把所有匹配的元素移除