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

2024-06-02 • 问答

我正在尝试使用启用 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 { 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>

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

iCMS 回答：具有 JavaScript 启用效果的导航菜单

大家都在问