Question

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

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时在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

Answer 1

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

在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);
});

Answer 2

我不确定为什么你不能让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>

戴维斯将为您处理后退按钮，因此，如果您单击Page1和Page2的链接，单击后退按钮将再次导航到Page1。

如果您有任何问题，请在GitHub页面上打开一个问题，详细说明您拥有的和不起作用的内容，我可以看一下。

如何更改此JavaScript？

2 个答案: