如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？-html教程-PHP中文网

如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？

DDD

发布： 2024-10-25 21:49:54

原创

1208人浏览过

如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？

在 html 和 javascript 的帮助下，无需使用 a 标签，也能实现在页面中位置跳转。以下是如何实现：

...
<ul class="dynamic-data sticky-top d-flex gap-5 py-3 fs-3 bg-white"></ul>
...

登录后复制

在此示例中，<ul> 元素将用作导航栏。

...
<script>
  const partDynamicDataTraverse = {
    "$element": $("#part .dynamic-data"),
    "list": [
      {
        "href": "#d1",
        "name": "skip1"
      },
      {
        "href": "#d2",
        "name": "skip2"
      },
      {
        "href": "#d3",
        "name": "skip3"
      }
    ]
  };

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

  let liEle = "";
  for (data of partDynamicDataTraverse.list) {
    liEle += `<li onclick="test('${data.href}')"><div class="item">${data.name}</div></li>`;
  }
  partDynamicDataTraverse.$element.append(liEle);
</script>
...

登录后复制

此 JavaScript 代码将使用 jQuery 库向 ;ul 元素添加<li>元素，这些<li>元素包含带 onclick 事件处理程序的 <div> 元素。

...
<div id="d1" class="div"></div>
<div id="d2" class="div"></div>
<div id="d3" class="div"></div>
...

登录后复制

这些 <div> 元素代表页面中的不同部分。

当您单击<li>元素时，onclick 事件处理程序将被触发，执行以下操作：

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

立即学习“Java免费学习笔记（深入）”；

将 href 属性中的哈希（#）符号移除，获得要滚动到的元素的 ID。
使用 scrollIntoView() 方法将指定的元素滚动到浏览器窗口的可见区域中。

这样，您就可以无需使用 <a> 标签，就能在页面中进行位置跳转了。

以上就是如何使用 HTML 和 JavaScript 实现页面内位置跳转，而无需使用 `` 标签？的详细内容，更多请关注php中文网其它相关文章！