jquery - jQuery 网站导航

Question

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

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

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

   event.preventDefault()
   (#my-content-div).load(NavLink1-content);

3. 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;
    });

Answer 1

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

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