0
const headerNavLink = document.querySelectorAll('.header-nav-link')
const headerNavItemTitle = document.querySelectorAll('.header-nav-item__title')
headerNavItemTitle.forEach(function(e, indice) {
e.addEventListener('click', function(e) {
console.log(headerNavLink[indice])
})
})
<nav class="header-nav">
<ul class="header-nav-items header-nav-items--mobile">
<li class="header-nav-item"><span class="header-nav-item__title">CBA</span>
</li>
<li class="header-nav-item"><span class="header-nav-item__title">Aluminio</span></li>
<li class="header-nav-item"><span class="header-nav-item__title"><a href="#"
class="header-nav-item__link">Produtos</a></span></li>
<li class="header-nav-item"><span class="header-nav-item__title"><a href="#"
class="header-nav-item__link">Carreiras</a></span></li>
<li class="header-nav-item"><span class="header-nav-item__title">Contato</span></li>
<li class="header-nav-item"><span class="header-nav-item__title">EN</span></li>
</ul>
<nav class="header-nav-content">
<div class="header-nav-link" data-number="1">
Data 1
</div>
<div class="header-nav-link" data-number="2">
Data 2
</div>
<div class="header-nav-link" data-number="3">
Data 3
</div>
</nav>
</nav>
How can I click on header-Nav-item__title (CBA), header-Nav-item__title (Aluminio), header-Nav-item__title (contact) to access data-number?
What is the relationship between
.header-nav-item__title
and.header-nav-link
? which thedata-number
which corresponds to each?– Sergio
In a linear way when clicking on CBA the Data 1 appears, when clicking on Aluminum the Data 2 appears, and when clicking on Contact the Data3 appears
– Geniton Lima
So you want to ignore the ones with a link like
Produtos
andCarreiras
?– Sergio
Yes I want to ignore the links 'Products and Careers'.
– Geniton Lima
Okay, I edited the answer, added a filter to remove the
li
who havea
within.– Sergio
You solved my problem. Thanks Sergio.
– Geniton Lima