0
164
ViewsAccediendo al enlace dentro de la etiqueta <li> usando javascript
Tengo una barra de navegación con una lista desordenada con la estructura de la etiqueta <a></a> dentro de <li></li>. Esto es lo que parece:
document.querySelector('.nav-links').addEventListener('click', function(e) { console.log(e.target); e.preventDefault(); if (e.target.classList.contains('nav-link')) { const id = e.target.getAttribute('href'); console.log(id); document.querySelector(id).scrollIntoView({ behavior: 'smooth' }); } }); <ul class="nav-links"> <li class="nav-item"> <a href="#section-1" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#section-2" class="nav-link">Products</a> </li> <li class="nav-item"> <a href="#section-3" class="nav-link">Benefits</a> </li> <li class="nav-item"> <a href="#section-4" class="nav-link">About</a> </li> <li class="nav-item"> <a href="#section-5" class="nav-link">Contact</a> </li> </ul>Puedo acceder a la etiqueta directamente incluso si hice clic en el exterior del enlace como en la siguiente captura de pantalla:
pero el problema es que necesito el valor en el href para poder cambiar la vista de mi sitio web cuando el
·
Juan Pablo Isaza
2 answers
Answer question0
Puede verificar si el elemento en el que se hizo clic era el enlace; de lo contrario, búsquelo:
document.querySelector('.nav-links').addEventListener('click', function(e) { console.log(e.target); e.preventDefault(); const link = e.target.classList.contains('nav-link') ? e.target : e.target.querySelector('a'); const id = link.getAttribute('href'); console.log(id); document.querySelector(id)?.scrollIntoView({ behavior: 'smooth' }); }); .box::before { content: attr(id); } .box { background-color: #f0f0f0; height: 50vh; margin: 5px; } <ul class="nav-links"> <li class="nav-item"> <a href="#section-1" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#section-2" class="nav-link">Products</a> </li> <li class="nav-item"> <a href="#section-3" class="nav-link">Benefits</a> </li> <li class="nav-item"> <a href="#section-4" class="nav-link">About</a> </li> <li class="nav-item"> <a href="#section-5" class="nav-link">Contact</a> </li> </ul> <div class="box" id="section-1"></div> <div class="box" id="section-2"></div> <div class="box" id="section-3"></div> <div class="box" id="section-4"></div> <div class="box" id="section-5"></div>
·
Juan Pablo Isaza
Report
0
En lugar de vincular el evento de clic a ul , puede vincularlo a li .
function onLinkClicked(e) { e.preventDefault(); if (e.target.classList.contains('nav-link')) { const id = e.target.getAttribute('href'); document.querySelector(id).scrollIntoView({ behavior: 'smooth' }); } } Array.from(document.querySelectorAll('.nav-item')) .forEach((node) => node.addEventListener('click', onLinkClicked)) .box { width: 100%; height: 200px; margin: 5px; background: yellow; } <ul class="nav-links"> <li class="nav-item"> <a href="#section-1" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#section-2" class="nav-link">Products</a> </li> <li class="nav-item"> <a href="#section-3" class="nav-link">Benefits</a> </li> <li class="nav-item"> <a href="#section-4" class="nav-link">About</a> </li> <li class="nav-item"> <a href="#section-5" class="nav-link">Contact</a> </li> </ul> <div class="box" id="section-1">Home Section</div> <div class="box" id="section-2">Products Section</div> <div class="box" id="section-3">Benefits Section</div> <div class="box" id="section-4">About Section</div> <div class="box" id="section-5">Contact Section</div>
·
Juan Pablo Isaza
Report
Answer question