上下文
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
派上用场的地方。
这根本不是一个愚蠢的问题。
任何时候在该事件处理程序中,您想知道新的 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/