3
<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,alert 显示 1 数字,而不是 2,并且在 URL 中的这个哈希更改为 2 之后。当你下次点击 3 时,它将显示 prevouse 2,依此类推.

对我来说有问题,因为我使用哈希在固定高度上滚动我的页面内容(由于架构问题而不能使用锚点),并且单击链接后这种行为只会在第二次单击时发生滚动,这是完全错误的.

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

4

4 回答 4

4

不完全是跨浏览器,但如果你愿意,你可以得到跨浏览器的 hashchange 变通方法,

<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>

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

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

于 2012-07-19T02:23:04.520 回答
1

不要在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>
于 2012-07-19T02:49:13.917 回答
1

我会使用onpopstateonhashchange事件监听器:

<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>
于 2012-07-19T02:27:47.070 回答
-1

您可以设置 URL 的哈希值

window.location.hash = '#newhash';

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

于 2012-07-19T02:31:20.437 回答