我正在使用两个导航栏。他们两个都共享一个类(“ 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/