如何更改此 JavaScript？答案

【问题标题】：How do I change this JavaScript?如何更改此 JavaScript？
【发布时间】：2013-07-01 03:27:38
【问题描述】：

我想更改内容在我的网站上的显示方式：

var FNav = {
init: function() {
    $("a[href*=#]").click(function(e) {
    e.preventDefault();
        if($(this).attr("href").split("#")[1]) {
            FluidNav.goTo($(this).attr("href").split("#")[1]);
        }
    });
    this.goTo("home");
},
goTo: function(page) {
    var next_page = $("#"+page);
    var nav_item = $('nav ul li a[href=#'+page+']');
    $(".page").fadeOut(500);
    next_page.fadeIn(500);

如何更改此 JavaScript，以便拥有适当的后退按钮功能？

我尝试过的方法（不成功）。这些是我尝试过的解决方案，但没有更改上面的 javascript。这就是为什么我认为它们似乎都不起作用。

使用此处描述的 History.js 方法： https://github.com/browserstate/history.js/我填写了所有步骤并将脚本输入到标题中，但只有 URL 栏中的 URL 单击链接时会发生变化。当我单击返回按钮时，URL 相应地更改，但内容不会加载。当我在 URL 栏，我被发送到主页。
Ajaxify 和 Gist 方法此处描述：https://github.com/browserstate/ajaxify 实现同上，同样的问题
Davis.js 方法描述如下： https://github.com/olivernn/davis.js 完成后一无所获的安装说明。没有变化。
jQuery BBQ 插件方法此处描述：http://benalman.com/projects/jquery-bbq-plugin/ 什么也没做，在标题中加载 .js 文件后没有任何变化的网站。
看了这篇文章，明白了： http://diveintohtml5.info/history.html

【问题讨论】：

后退按钮的标准工作方式有什么问题，正确的方法是什么？任何合理的浏览器也将支持锚导航。
我讨厌触动用户预期行为的开发人员...... Grrrr
您应该改为测试$(this).attr("href").indexOf('#')===0。例如，您现在的测试还将匹配 Wikipedia 链接与主题标签以链接到文档中的特定部分。或任何其他带有主题标签的外部链接。
如果您详细说明“适当的后退按钮功能”的含义，将会有所帮助。
@AaronKurtzhals 谢谢，我的意思是当我去的时候： /#services -> /#special -> /#superspecial 然后使用浏览器的后退按钮我可以去： /#special -> /#服务

标签： javascript ajax html jquery

【解决方案1】：

我不确定你为什么不能让 Davis.js 为你工作？也许在 GitHub 页面上打开一个问题。

如果您想在 davis 中使用基于哈希的路由，您需要包含 hash routing extension。然后，您只需在 davis 之后将其包含在您的页面中。

下面的设置应该允许你处理路由

Davis.extend(Davis.hash)

Davis(function () {
    this.get('/:page', function (req) {
        FluidNav.goTo(req.params.page);
    })
})

假设您的页面中有以下链接

<a href="#/page_1">Page1</a>
<a href="#/page_2">Page2</a>

Davis 会为您处理后退按钮，因此，如果您单击第 1 页的链接，然后单击第 2 页，单击后退按钮将再次导航到第 1 页。

如果您有任何问题，请在 GitHub 页面上打开一个问题，详细说明您有什么问题和什么问题，我可以看看。

【讨论】：

【解决方案2】：

后退按钮不会神奇地起作用。您需要编写代码并监听事件变化！

在 history.js 中，it shows you right on the front page:

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
});

【讨论】：