具有启用JavaScript效果的导航菜单

我正试图制作一个启用JavaScript效果的导航菜单，但每个菜单项都有一个"a"和一个"I"标记，需要同时启用这两个标记。基本上html菜单很简单；

<div class="menu-nav">
<ul class="menu-nav-list">
<li class="menu-items">
<a href="#" class="menu-nav-link ativo"><i class="uil uil-estate menu-nav-link-icon active-icon"></i> Home</a>
</li>
<li class="menu-items">
<a href="#" class="menu-nav-link"><i class="uil uil-user menu-nav-link-icon"></i> About me</a>
</li>
<li class="menu-items">
<a href="#" class="menu-nav-link"><i class="uil uil-bag menu-nav-link-icon"></i> Works</a>
</li>
<li class="menu-items">
<a href="#" class="menu-nav-link"><i class="uil uil-envelope-minus menu-nav-link-icon"></i> Contact me</a>
</li>
</ul>
</div>

但在JS代码中，我试图操作包含所有项的数组，并且我只能使用"this"来激活"forEach"中的特定项

const iconesLink = document.querySelectorAll('.menu-nav-link-icon')
const itemsLink = document.querySelectorAll('.menu-nav-link')
itemsLink.forEach(l => l.addEventListener('click', activeLink, activeIcon))
function activeLink(){
itemsLink.forEach(l => l.classList.remove('ativo'))
this.classList.add('ativo')
}

function activeIcon(){
iconesLink.forEach(i => i.classList.remove('active-icon'))
this.forEach(l => l.classList.add('active-icon'))
}

有没有其他方法可以让我只需单击一次事件就激活和？

eventTarge.addEventListener只接受一个事件处理程序函数。该函数是用一个对象调用的，该对象已将目标单击为属性目标{ target: the element that was clicked }。

我在监听器中获取点击的元素，并调用另外两个函数。

在activeIcon函数中，我们可以通过对单击的标记调用querySelector来获得对所选图标的引用。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback

<!DOCTYPE html>
<html>
<body>
<div class="menu-nav">
<ul class="menu-nav-list">
<li class="menu-items">
<a href="#" class="menu-nav-link ativo"><i class="uil uil-estate menu-nav-link-icon active-icon"></i> Home</a>
</li>
<li class="menu-items">
<a href="#" class="menu-nav-link"><i class="uil uil-user menu-nav-link-icon"></i> About me</a>
</li>
<li class="menu-items">
<a href="#" class="menu-nav-link"><i class="uil uil-bag menu-nav-link-icon"></i> Works</a>
</li>
<li class="menu-items">
<a href="#" class="menu-nav-link"><i class="uil uil-envelope-minus menu-nav-link-icon"></i> Contact me</a>
</li>
</ul>
</div>
<script>
const iconesLink = document.querySelectorAll('.menu-nav-link-icon')
const itemsLink = document.querySelectorAll('.menu-nav-link')
itemsLink.forEach(l => l.addEventListener('click', function(event) { 
activeLink(event.target) 
activeIcon(event.target.querySelector('.menu-nav-link-icon'))
}))
function activeLink(current){
itemsLink.forEach(l => l.classList.remove('ativo'));
current.classList.add('ativo')
}

function activeIcon(current){
iconesLink.forEach(i => i.classList.remove('active-icon'));
current.classList.add('active-icon');
}
</script>
</body>
</html>

相关内容

最新更新

热门标签：