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

【问题标题】：How to correctly implement History.js or any other alternative (jquery bbq, pjax, jquery adress) in this application?如何在此应用程序中正确实现 History.js 或任何其他替代方案（jquery bbq、pjax、jquery 地址）？
【发布时间】：2012-07-27 01:22:27
【问题描述】：

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

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

【问题讨论】：

我对此的解决方案是检查window.location，看看在我们的window.location 中找到的hash 是否与某些unique identifier populated into the container by the ajax call. 相同，如果不是，那么create a conditional statement to perform the above described。
感谢您的回答。网上有没有例子？我在 js 中不是那么好，所以我不能直接从我的脑海中做到这一点。

标签： jquery ajax history.js pjax jquery-bbq

【解决方案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 文档 here，您可能想查看他的示例，以独立管理多个哈希状态。

【讨论】：

插入第二部分代码时页面不知何故停止工作：$(window).bind( 'hashchange', function(e) { var state = $.bbq.getState(); //do something with the state if(state['a'] === 'link1') { $(".slidingDiv1").fadeToggle(); } } 所有 div 均已打开，点击时没有任何反应