Question

我正在尝试创建一个使用AJAX动态填充div的网页。我已经能够使用以下AJAX代码简单地更新div内容：

$(document).ready(function(){
    $("#projects-list a").click(function(e){ 
        e.preventDefault();
        var url = $(this).attr('href'); //get the link you want to load data from
        $.ajax({ 
            type: 'GET',
            url: url,
            success: function(data) { 
                $('#content').fadeOut(300, function() {
                    $('#content').html(data).delay(200).fadeIn(300);
                });
            } 
        }); 
    });
});

但是，我也希望找到更新页面URL或更改哈希的方法。因此，例如，当用户获得 /projects.html 的链接时，他们将被发送到链接页面，然后当点击链接时，使用AJAX更改内容，并且网址将会更改为 /projects.html#first 。这样，用户导航到 /projects.html#first ，他们将看到第一个项目的内容，而不是可供选择的原始项目列表。

Answer 1

我建议使用库来处理URL和paths

http://github.com/flatiron/director

http://balupton.github.com/history.js/demo

Answer 2

如果你想使用标准＃那么你可以使用via js，在函数调用上执行： window.location.hash = valueYouWantToSet，主要是ID，

然后你可以检查页面加载，如果有＃在那里然后调用一个特定的函数，如：

handleHash: function () { if (!isNaN(parseInt(window.location.hash.replace('#', '')))){ this.showDetails(window.location.hash.replace('#', '')); }

使用AJAX / jQuery动态更改页面内容和设置哈希

2 个答案: