有没有办法让sibling non-active div？

Question

我想获取所有没有 "active" class 的元素。这是我的脚本：

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>

Javascript:

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";
  });
}

Answer 1

我想获取所有没有 "active" class 的元素。

您可以像这样使用:not(.active)：

var nonActive = document.querySelectorAll(".btn:not(.active)");

您可以在 a 元素中使用 active class 而不是 i。我认为您可以通过以下方式实现您的目标：

var btn = document.querySelectorAll("a");
Array.from(btn).forEach(function(el){
  el.addEventListener("click", () => {
    Array.from(btn).forEach(b => b.classList.remove('active'));
    el.classList.add('active');
  });
});

li{
 list-style-type: none;
}
.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" class="active"><i class="fas fa-home btn"></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>

有没有办法让sibling non-active div？

Is there a way to sibling non-active div?

html

javascript

siblings

dom-events