jquery - 如何在此应用程序中正确实现 History.js 或任何其他替代方案（jquery bbq、pjax、jquery 地址）？

Question

正在处理的页面的核心看起来像这样http://jsfiddle.net/AUCYf/1/并且当用户从搜索引擎登陆它时，应该打开已搜索的“切换框”中的内容。我发现了很多关于使 AJAX 可爬行的教程，但我一直坚持实现我在标题中提到的脚本。

现在发生的情况是，当我单击按钮“LINK1”时 div1 打开并且 url 为：mypage.com/#link1
我需要在直接访问 mypage.com/#link1 时打开 div1。另外，因为可以同时打开更多的 div，有没有办法做这样的事情 mypage.com/#link1&link3

Answer 1

使用 jQuery BBQ 实现此目的的一种常见方法是绑定到窗口 hashchange 事件以处理基于 ajax 哈希历史的导航，然后在首次加载应用程序时手动触发 hashchange 事件。

jQuery BBQ 使用参数化的哈希状态，可以独立管理多个参数。例如，您的网址可能看起来像

mypage.com/#a=link1&b=link3

要使这项工作正常进行，您需要更改 onclick 事件以使用 BBQ pushState，而不仅仅是在锚点上使用 href="#link1"。

把它们放在一起，我们可以有这样的东西：

$('.show_hide1').click(function(){
    $.bbq.pushState({'a':'link1'});
});

...

$(window).bind( 'hashchange', function(e) {
    var state = $.bbq.getState();
    //do something with the state
    if(state['a'] === 'link1') {
        $(".slidingDiv1").fadeToggle();
    }
    ...
}

$(window).trigger('hashchange');

$(window).trigger('hashchange') ; 加载脚本时将触发并自动从 URL 加载适当的内容。

在这里查看 jQuery BBQ 文档，您可能想查看他的示例以独立管理多个哈希状态。