上下文

Question

上下文

CSS缺少“a：current”选择器或访问当前URL，因此我尝试编写vanilla JS来为我的菜单中链接到同一页面/锚点的链接着色。

每次单击锚链接时都会运行一个函数来检查每个菜单链接是否与新锚点相对应。问题：document.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事件？如果是这样，你会怎么做？

很抱歉，如果这个问题看起来很愚蠢或者已经得到了解答（我没有成功地找到它）。

Answer 1

这是window.onhashchange派上用场的地方。

Check it out on MDN

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

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

window.onhashchange = function () {
    console.log(location.hash);  // new hash/anchor location
}

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

上下文

要重现的代码

示例：

问题

1 个答案: