Question

我有什么： 使用以下脚本显示页面的网站：

var FluidNav = {
    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+']');
        $("nav ul li").removeClass("current");
        nav_item.parent().addClass("current");
        FluidNav.resizePage((next_page.height() + 40), true, function() {
             $(".page").removeClass("current"); next_page.addClass("current"); 
        });
        $(".page").fadeOut(500);
        next_page.fadeIn(500);

点击链接时，网址栏中的网址不会更改，但会显示内容。无法使用“浏览器返回”按钮。内部链接带有#hash标记。 EX：abc.com/#home，abc.com/#services。但是，如果我要在网址栏中输入abc.com/#services，我会被重定向到#home页面。

我想要实现的目标： 当我点击链接时，要更改的URL，以及要在其历史记录中记录的浏览器。当我按下后退按钮时，该网站会生成我之前访问过的页面内容。当我打开新标签页并输入abc.com/#services时，要发送到#services页面而不是主页

我尝试了什么 这些是我读过的资源以及我尝试过的解决方案：

使用此处描述的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

似乎尽管我付出了努力，但我的网站正在使用的代码中有一些东西妨碍了上述方法。

如何解决这个问题，我们非常感谢您的建议。

有效处理浏览器历史记录和后退按钮

0 个答案: