0

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

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

4

2 回答 2

0

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

在 history.js 中，它显示在首页上：

// 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);
});
于 2013-02-15T13:41:38.703 回答
0

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

如果你想在 davis 中使用基于散列的路由，你需要包含散列路由扩展。然后，您只需在 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 页面上打开一个问题，详细说明你有什么和什么不工作，我可以看看。

于 2013-02-24T12:41:02.260 回答