Навигационное меню с включенным эффектом JavaScript

#javascript #html #arrays #dom-events #dynamic-arrays

Вопрос:

Я пытаюсь создать навигационное меню с включенным эффектом 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 я пытаюсь манипулировать массивом, в котором есть все элементы, и я могу использовать » это «только для активации определенного элемента в «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'))
}

Был бы другой метод, с помощью которого я мог бы активировать и то, и другое событие одним щелчком мыши?

Ответ №1:

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>