我想获取所有没有“活动”类的元素。这是我的脚本:
-html
<nav class="nav">
<li>
<a href="#Home"><i class="fas fa-home btn active"></i></a>
</li>
<li>
<a href="#About"><i class="fas fa-user-astronaut btn"></i></a>
</li>
<li>
<a href="#Contact"><i class="fas fa-file-contract btn"></i></a>
</li>
</nav>
-Js
var btn = document.querySelectorAll(".btn");
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", () => {
var elements = document.getElementsByClassName("active");
if (btn.length > 0) {
elements[0].className = elements[0].className.replace("active", "");
}
btn[i].className += " active";
});
}
我想获取所有没有“活动”类的元素。
您可以像使用:not(.active)
:
var nonActive = document.querySelectorAll(".btn:not(.active)");
但是我认为您可以通过以下方式实现您所期待的目标:
var btn = document.querySelectorAll(".btn");
btn.forEach(function(el){
el.addEventListener("click", () => {
btn.forEach(b => b.classList.remove('active'));
el.classList.add('active');
});
});
.active{
color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<nav class="nav">
<li>
<a href="#Home"><i class="fas fa-home btn active"></i>Home</a>
</li>
<li>
<a href="#User"><i class="fas fa-user-astronaut btn"></i>User</a>
</li>
<li>
<a href="#Contact"><i class="fas fa-file-contract btn"></i>Contact</a>
</li>
</nav>