javascript - 在不重新加载页面的情况下更新 URL 哈希

Question

<script>
function CurHash(){
    var id = parseInt(window.location.hash.replace("#", ""));
    alert(id);
}
</script>

<!-- START URL: test.htm#1 -->
<a href='#1' onClick='CurHash()'>#1</a>
<a href='#2' onClick='CurHash()'>#2</a>
<a href='#3' onClick='CurHash()'>#3</a>

如果我们现在在 test.htm#1 上并单击链接 #2，警报显示 1 个数字，而不是 2，并且在 URL 中的此哈希更改为 2 之后。当您下次单击 3 时，它将显示 prevouse 2，等等。

这对我来说是个问题，因为我使用哈希在固定高度滚动我的页面内容(由于体系结构问题不能使用 anchor )，并且点击链接滚动后的这种行为只会在第二次点击时发生，什么完全错误。

问题:如何在不在浏览器中重新加载页面的情况下更新哈希并获取更新的(不是先前的)值以供进一步使用(所有用于滚动的内容已经在页面上，从服务器重新加载不是好的解决方案)。

Answer 1

不完全是跨浏览器，但如果需要，您可以获得跨浏览器哈希更改解决方法，

<script>
$(window).on('hashchange load',function(){
    var id = parseInt(window.location.hash.replace("#", ""));
    alert(id);
});
</script>

<!-- START URL: test.htm#1 -->
<a href='#1'>#1</a>
<a href='#2'>#2</a>
<a href='#3'>#3</a>

使用绑定(bind): http://jsfiddle.net/KdqWK/1/

用于: http://jsfiddle.net/KdqWK/2/