有没有同级无效div的方法?

问题描述 投票:1回答:1

我想获取所有没有“活动”类的元素。这是我的脚本:

-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";
  });
}
javascript html javascript-events dom-events siblings
1个回答
0
投票

我想获取所有没有“活动”类的元素。

您可以像使用: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>
© www.soinside.com 2019 - 2024. All rights reserved.