javascript - 在点击此链接后,在绑定(bind)到 anchor 链接的 onclick 函数内获取 URL/ anchor

标签 javascript html

上下文

CSS 缺少“a:current”选择器或对当前 URL 的访问,因此我尝试编写普通 JS 代码来为菜单中链接到同一页面/ anchor 的链接着色。

每次单击 anchor 链接时,我都会运行一个函数来检查每个菜单链接是否对应于新 anchor 。问题: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>

示例:

当您点击 anchor 2 时:“file:///home/[...]/Anchor_Example.html”

当您点击 anchor 3 时:“file:///home/[...]/Anchor_Example.html#anchor_2”

当您点击 anchor 1 时:“file:///home/[...]/Anchor_Example.html#anchor_3”

当您点击 anchor 1 时:“file:///home/[...]/Anchor_Example.html#anchor_1”

(按照这个顺序:有“延迟”:打印的 URL 是单击链接之前的 URL。我想要的是当您单击 anchor 1 时:“file:///home/[...]/Anchor_Example.html#anchor_1")

问题

在点击 anchor 链接后是否可以轻松获取 URL,或者在点击链接后调用 onClick 事件? 如果是这样,你会怎么做?

很抱歉,如果这个问题看起来很愚蠢或已经得到解答(我寻找它但没有成功)。

最佳答案

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

Check it out on MDN

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

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

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

关于javascript - 在点击此链接后,在绑定(bind)到 anchor 链接的 onclick 函数内获取 URL/ anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35100696/

相关文章:

javascript - 如何使用 javascript、Angular 解析 doc/docx 文件

html - 如何在顶部的导航栏中放置固定 Logo ?

JQuery 滚动按钮不适用于某些浏览器和移动设备

html - 在悬停时调整元素的大小以不移动其他元素

javascript - Angular |删除按钮上的事件类

javascript - 如何使用客户端 gmail API 发送电子邮件,其中包含 html 内容和图像作为附件

html - 如何将数据可见范围更改为 % 百分比

html - 是否有任何解决方法可以在 http 和 https 上使用 html5 localstorage?

javascript - 如何找到 body 元素之后的每个子元素,并获取其中包含特定类的元素的 html

javascript - 如何使 JS 对象在多个文件中可用