Question

我正在使用两个导航栏。他们两个都共享一个类（“ navbar-item”）。基本上，两个导航栏执行相同的操作。

例如

navbar-1

<a class="navbar-item" href="#Services">
  <span class="icon"><i class="fas fa-clipboard-list"></i></span>
  <span>Services</span>
</a>
<a class="navbar-item" href="#Delivery">
  <span class="icon"><i class="fas fa-shipping-fast"></i></span>
  <span>Delivery</span>
</a>
<a class="navbar-item" href="#Contact">
  <span class="icon"><i class="fas fa-shipping-fast"></i></span>
  <span>Contact</span>
</a>

navbar-2

<li class="navbar-item"><a href="#Services"></a></li>
<li class="navbar-item"><a href="#Delivery"></a></li>
<li class="navbar-item"><a href="#Contact"></a></li>

我希望在单击时添加/删除另一个类名（“当前”）。我想将此新的类名（“当前”）添加到两个导航栏中。因此，当单击“服务”时，在两个导航栏中，仅“服务”应具有类current。单击“交付”时，在两个导航栏中，只有“交付”应具有类current。

我正在寻找纯js解决方案（没有jQuery）。这是我到目前为止所拥有的。
这样会将新的类名（current）仅传递到第一个导航栏。

var btns = document.getElementsByClassName("navbar-item");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("current");
    current[0].className = current[0].className.replace(" current", "");
    this.className += " current";
  });
}

Answer 1

使用document.querySelectorAll()

Document方法querySelectorAll（）返回静态（非实时） NodeList表示与以下元素匹配的文档元素列表指定的选择器组。

document.querySelectorAll('nav.navbar-item')
                .forEach((node) => node.className += ' current')

在这里，nav.navbar-item是必需的选择，current是要附加到querySelector选择的节点上的新类。

添加详细解决方案：

let classToBeAdded = 'current';//new class to be added
let myNavs = document.querySelectorAll('nav.navbar-item');//Selects all navs with the given class
for(let element of myNavs) {//looping through the elements captured by the above query
    element.classList.add(classToBeAdded);//Appending new class to the element
}

Answer 2

注意：-这是您可以根据所选元素切换（添加/删除）类的检测div的方法。

var div1 = document.getElementById("First");
div1.addEventListener("click", function (e) {
  if (event.currentTarget.classList.contains('active')) {
    event.currentTarget.classList.remove('active');
      var element = document.getElementById("Second");
      element.classList.add("active");
  } else {
    event.currentTarget.classList.add('active');
      var element = document.getElementById("Second");
      element.classList.remove("active");
  }
});
var div2 = document.getElementById("Second");
div2.addEventListener("click", function (e) {
  if (event.currentTarget.classList.contains('active')) {
    event.currentTarget.classList.remove('active');
    var element = document.getElementById("First");
      element.classList.add("active");
  } else {
    event.currentTarget.classList.add('active');
    var element = document.getElementById("First");
      element.classList.remove("active");
  }
});

.active{
 color:red;
}

<div id"newNav">
  <a class="navbar-item te" id="First" href="#Delivery">
  <span class="icon"><i class="fas fa-shipping-fast"></i></span>
  <span>Delivery</span>
  </a>
  <li class="navbar-item" id="Second"><a href="#Delivery"></a>
    <span>Delivery2</span>
  </li>
</div>

将课程传递给两个导航栏

2 个答案: