在点击此链接后，获取绑定到锚链接的 onclick 函数内的 URL/锚点

Get URL/anchor inside an onclick function binded to an anchor link AFTER following this link

本文关键字：链接 onclick 锚点 函数 URL 绑定 获取      更新时间：2023-09-26

上下文

CSS 缺少"a：current"选择器或对当前 URL 的访问权限，因此我正在尝试编写香草 JS 来为菜单中链接到同一页面/锚点的链接着色。

每次单击锚链接时，我都会运行一个函数，以检查每个菜单链接是否与新锚点相对应。问题：文档。URL 是指单击链接之前的 URL。请注意，我认为我可以用不同的方式为我的链接着色，但这不是问题的一部分(如果您有建议，您可以发表评论(。

要重现的代码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
  </head>
  <body>
    <script>
      var check_anchor = function()
      {
        document.getElementById('url_log').innerHTML = document.URL;
      }
    </script>
    <a href='#anchor_1' onclick='check_anchor();'>Anchor 1</a>
    <a href='#anchor_2' onclick='check_anchor();'>Anchor 2</a>
    <a href='#anchor_3' onclick='check_anchor();'>Anchor 3</a>
    <p>URL is <span id='url_log'></span></p>
  </body>
</html>

例：

当您单击锚点 2 时："file:///home/[...]/Anchor_Example.html">

当您单击锚点 3 时："file:///home/[...]/Anchor_Example.html#anchor_2">

当您单击锚点 1 时："file:///home/[...]/Anchor_Example.html#anchor_3">

当您单击锚点 1 时："file:///home/[...]/Anchor_Example.html#anchor_1">

(按顺序：有"延迟"：打印的URL是点击链接之前的URL。我想要的是当您单击锚点 1 时："file:///home/[...]/Anchor_Example.html#anchor_1"(

问题

在关注锚链接后

是否可以轻松获取 URL，或者在关注链接后调用 onClick 事件？如果是这样，你会怎么做？

抱歉，如果这个问题看起来很愚蠢或已经回答了(我寻找它但没有成功(。

这就是

window.onhashchange派上用场的地方。

在 MDN 上查看

根本不是一个愚蠢的问题。

任何时候在该事件处理程序中，您都想知道新URL是什么，您可以使用location.href或仅获取更改的部分(哈希(使用location.hash 

window.onhashchange = function () {
    console.log(location.hash);  // new hash/anchor location
}
相关文章：