如何在 HTML 页面内跳转而不使用 a 标签？

有志者，事竟成！如果你在学习文章，那么本文《如何在 HTML 页面内跳转而不使用 a 标签？ 》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

页面内位置跳转无需 a 标签

现有的 HTML 代码中，需要为 ".item" 元素添加 "href" 属性以指定跳转位置。可以通过以下方式实现：

首先，重构代码，使用 "li" 元素作为跳转链接，并为其添加 "onclick" 属性：

<ul class="dynamic-data sticky-top d-flex gap-5 py-3 fs-3 bg-white">
  <li onclick="test('#d1')"><div class="item">skip1</div></li>
  <li onclick="test('#d2')"><div class="item">skip2</div></li>
  <li onclick="test('#d3')"><div class="item">skip3</div></li>
</ul>

然后，添加一个辅助函数 "test()"，它将获取指定的 "href" 值，解析出 ID，并使用 "scrollIntoView()" 方法滚动到该 ID 对应的元素。

function test(href) {
  const id = href.replace('#', '');
  document.getElementById(id).scrollIntoView();
}

通过上述步骤，即可在不使用 "a" 标签的情况下实现页面内位置跳转。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何在 HTML 页面内跳转而不使用 a 标签？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。