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，等等。

对我来说有问题，因为我使用哈希来在固定高度上滚动我的页面内容（由于架构问题不能使用锚点），并且点击链接滚动后会出现这样的行为只会在第二次点击时发生是完全错误的。

问题：如何更新哈希并获取更新（非previouse）值以供进一步使用，无需在浏览器中重新加载页面（所有内容都已在页面上滚动，从服务器重新加载它不是一个好方法）。

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/

Answer 2

不是在onclick中调用curHash，而是在设置hash之后在href中调用它..请找到以下代码..

<a href='javascript:location.hash="#1";CurHash();'>#1</a>
<a href='javascript:location.hash="#2";CurHash();'>#2</a>
<a href='javascript:location.hash="#3";CurHash();'>#3</a>

Answer 3

我会使用 onpopstate 和 onhashchange 事件监听器：

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">

    if (typeof window.onpopstate != 'undefined') {
        window.onpopstate = curHash;
    } else if (typeof window.onhashchange != 'undefined') {
        window.onhashchange = curHash;
    }

    function curHash() {
        var h = window.location.hash;
        if (h == '') return; // no hash. this is probably the first load
        h = h.substr(1); // hash always starts with #
        alert('hash: ' + h);
    }

</script>
</head>

<body>
<ul style="margin:0; padding:0;">
    <li><a href="#1">Click here for 1</a></li>
    <li><a href="#2">Click here for 2</a></li>
    <li><a href="#3">Click here for 3</a></li>
    <li><a href="#4">Click here for 4</a></li>
</ul>
</body>
</html>

Answer 4

您可以设置网址的哈希值

window.location.hash = '#newhash';

您也可以使用JS变量来存储点击的链接并将其传递到您的代码中...除非我误解了这个问题。

更新URL哈希而不重新加载页面

4 个答案: