5

我正在尝试处理在 jQuery 中使用 URL 哈希来控制 Ajax 中的历史记录并使链接/页面成为书签。我已经尝试了几乎所有的插件，但我似乎无法让任何插件正常工作，所以我真的没有任何代码示例。但我愿意接受任何建议、信息、教程等。

我试图将其合并到的其中一个页面的不同之处在于我有一个 jQuery 动画驱动的启动/加载页面，这也是所有内容都将加载到的同一页面。

..在这个链接上，我想绕过所有的启动/加载动画，并根据哈希值/字符串（在本例中为#home）直接加载内容。

我一直在努力解决这个问题，非常感谢任何帮助，谢谢！

4

2 回答 2

12

那你有什么问题？设置哈希标签还是处理哈希的变化？

当然，设置哈希只是将哈希放入链接中的问题，例如，<a href="www.voidsync.com/2010/#page">Link</a>但我猜这不是你的问题。

要实际使用哈希值，您必须有一个侦听器函数，例如每 100 毫秒检查一次哈希值是否发生变化并采取相应措施。一个简单的函数可以是这样的：

$(function() {
    var current_hash = false;
    setInterval(function() {
        if(window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("content.php?page="+current_hash);
        }        
    }, 100);    
});

该（未经测试的）函数将每 100 毫秒检查一次哈希是否已更改，如果已更改，则通过 Ajax 更新页面。

此功能也适用于页面加载，因此如果用户使用诸​​如 的链接登陆页面www.voidsync.com/2010/#images，该功能将自动加载页面“图像”。所以历史和书签工作。

希望对您有所帮助，请问您是否还有其他意思。

于 2009-11-30T23:27:52.553 回答
1

根据 Tatu 的回答，我只是更改了一些内容以使其适合我。它保留历史记录，因此后退和前进按钮效果很好。这就是我所拥有的，

$(function() {
var current_hash = false;
setInterval(function() {
    if(window.location.hash != current_hash) {
        current_hash = window.location.hash;
            if(current_hash=='#home'){
                var month = '9';
                var year ='2011';       
                $.ajax({
                    type: "POST",
                    url: "/home.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });                     
            }
            else if(current_hash=='#edit'){
                $.ajax({
                    type: "POST",
                    url: "/edit.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });             
            }
    }        
}, 100);

然后简单地将一些哈希分配给链接 href 属性；

                    <li><a href="#home">Home Page</a></li>
                <li><a href="#edit">Edit Page</a></li>

这不是一个完整的重写，只是基本上在同一件事上添加了一些 if 语句，但它可能会帮助某人。

于 2011-09-16T16:03:11.927 回答