1

我所拥有的： 一个使用以下脚本显示页面的网站：

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

单击链接时，URL 栏中的 URL 不会更改，但会显示内容。无法使用浏览器后退按钮。内部链接带有#hash标签。例如：abc.com/#home，，abc.com/#services。但是，如果我abc.com/#services在 URL 栏中输入，我将被重定向到该#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

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

非常感谢任何有关如何解决此问题的建议。

4

0 回答 0