首页 > 文章列表 > 如何在 HTML 页面内跳转而不使用 a 标签?

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

407 2024-12-22

如何在 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" 标签的情况下实现页面内位置跳转。

来源:1729861861