I want to redirect on the click of the item
EX: class="nav-item" data-nav-item="1"
to the link which is defined in his child tag "a"
<div class="nav-item" data-nav-item="1">
<div class="item-parent">
<a href="https://mywebsite-men.com">MEN</a>
</div>
</div>
<div class="nav-item" data-nav-item="2">
<div class="item-parent">
<a href="https://mywebsite-women.com">Women</a>
</div>
</div>You can use click to trigger click when the parent element is clicked
[...document.getElementsByClassName('nav-item')].forEach(item => {
item.addEventListener('click', (e) => {
item.querySelector('a').click()
})
}).nav-item {
width: 50px;
height: 20px;
padding: 10px;
border: 1px solid green;
cursor: pointer;
}<div class="nav-item" data-nav-item="1">
<div class="item-parent">
<a href="https://mywebsite-men.com">MEN</a>
</div>
</div>
<div class="nav-item" data-nav-item="2">
<div class="item-parent">
<a href="https://mywebsite-women.com">Women</a>
</div>
</div>