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

例如。

导航栏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>


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

最佳答案

注意:-这是您可以根据所选元素切换(添加/删除)类的检测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>

关于javascript - 将类(class)传递给两个导航栏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55860877/

10-12 00:17
查看更多