jQuery 网站导航答案

【问题标题】：JQuery site navigationjQuery 网站导航
【发布时间】：2012-06-22 01:28:35
【问题描述】：

我正在尝试使用 JQuery 执行最基本的导航，但我失败了。

我有多个包含各种内容的 .html 文件，但我想要一个持久页面并将内容加载到 div 中。我目前实现导航的方式：

用户点击 NavLink1
JQuery 执行以下操作：

event.preventDefault()
(#my-content-div).load(NavLink1-content);
URL 现在显示为“www.mydomain.com/#NavLink1”。

在用户浏览 www.mydomain.com/NavLink1 并且内容正确加载的情况下，我到底如何实现与#NavLink1 的直接链接和/或实现系统？

一个导航链接的导航代码：

    $("#story-button-link").click(function(event){
        $(this).addClass("selected");
        $("#landing-page-article").load('./story.html', function() {
            $(document).ready(function() {
            });
        });
        return false;
    });

【问题讨论】：

您正在寻找的是服务器端 url 重写 - Apache 中的 easy，IIS 中的废话。
我可以访问 .htaccess，所以这是我应该采取的方法吗？现在它只包含我对 CORS 的徒劳尝试（我认为我的主机很垃圾，并不真正支持它）。
这是唯一的方法。其他任何东西都是 hacky 和非 xbrowser 友好的。

标签： jquery html ajax navigation

【解决方案1】：

如果您不介意只支持较新的浏览器版本，您可以使用 HTML5 历史记录管理功能 - 具体来说是 pushState，它允许您在不重新加载页面的情况下将 URL 更改为 yourdomain.com/NavLink1，允许您做同样的事情，但保持 URL 不变。

如果您确实介意旧版浏览器，您可以使用History.js，它可以解决跨浏览器兼容性问题。在较新的浏览器上，它将使用 HTML5 功能，而在旧版本上，它将恢复为哈希更改。

【讨论】：

不幸的是，我期待旧版浏览器。这恰好是一个包含RSVP的婚礼网站，所以我应该支持IE。
@Chad_C：我的解决方案确实支持 IE - 关于 History.js 的部分。如果此答案对您有帮助，请将其作为正确答案接受，以便将此问题标记为已解决。谢谢！
不幸的是，问题仍然存在—— History.js 已包含在内，并且我遵循了令人困惑的文档。我什至尝试删除 hashbang 并使用常规链接，例如 /home、/navlink1 等，它们只是返回 404。我仍在尝试研究也支持刷新的正确解决方案。
我正在使用 .click() 事件来处理所有导航，所以这可能是我的问题。编辑了我的帖子以包含导航代码。