访问里面的链接<li>使用 javascript 标记</li>

Question

我有一个带有无序列表的导航栏，其结构为<a></a>标记在<li></li>. 这是它的样子：

 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>

即使我点击链接的外部，也可以直接访问标签，如下面的屏幕截图所示：

但问题是我需要href上的值，这样我仍然可以在

标签被点击，而不仅仅是当标签被点击时。 有什么办法可以做到这一点？

Answer 1

您可以检查点击的元素是否是链接，否则找到它：

 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>

Answer 2

除了将点击事件绑定到ul ，您还可以将其绑定到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>