1

我想在id="demo"单击链接时显示更新的锚点/哈希。文档的布局如下。

<html>
<head>

<script type="text/javascript">
function myfunction()
{
document.getElementById("demo").innerHTML=location.hash;
}
</script>

</head>
<body>

<h1>Javascript</h1>
<p id="demo">This is a paragraph.</p>

<a href="#example" onclick="myfunction()">here</a>
</body>
</html>

唯一的问题是，当点击链接时，javascript 不会获得更新的锚/哈希，直到第二次按下链接。

4

4 回答 4

2

这是因为此时位置没有改变。这是您可以使用的一种方法：

function myfunction() {
    // Sets the event handler once you click, so it will execute when
    // the hash will change.
    window.onhashchange = function() {
        document.getElementById("demo").innerHTML=location.hash;
    };
}

一种现代方式是：

var hashchange;
function myfunction() {
    if ( !hashchange ) {
        hashchange = addEventListener( 'change', function() {
            document.getElementById("demo").textContent = location.hash;

            // If you want to remove the event listener right after,
            // you can do this:
            removeEventListener( hashchange );
        }, false );
    }
}
于 2012-06-15T07:57:58.587 回答
1

试试这个 JQuery 插件来检测哈希变化：

http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/

它是开源的，所以请查看代码，它非常复杂——300 多行（带注释，但仍然如此）。

于 2012-06-15T07:57:43.440 回答
0

尝试这个：

function myfunction() {
  setTimeout(function() {
    document.getElementById("demo").innerHTML=location.hash;
  }, 1);
}

因为当您单击链接时，哈希仍然是您以前的哈希，因此您需要延迟。

于 2012-06-15T07:58:03.267 回答
0

这是因为“位置”指的是页面内的锚点。

第一次点击，你在页面内没有位置，但是锚点会带你到#example，但这一切都是在onclick完成它的业务之后发生的。第二次点击我们有一个#example的位置。

请参阅此处的 W3 Schools 文档。

onclick 事件在锚有机会完成其工作之前被触发。这对于能够取消事件的传播并防止重定向等至关重要，但遗憾的是会弄乱您的代码。

于 2012-06-15T07:56:21.197 回答