使用 jquery 将 html 加载到 div 中不会让我来回走动

Question

我是 jquery 的第一步。我有一个 index.php 文件，其中包括：

• header.html

• indexview.html

• footer.html.

在 indexview.html 文件中有两个 div。一个在左边（一个菜单），一个在右边（div id="content"）。每当我单击左侧菜单上的项目时，jquery 负责加载其他 html 页面（并最终通过 ajax 从数据库中获取数据）进入右侧 div（div id="content"）。我真的很喜欢这种方法，但问题是，例如，如果我加载：

• Photo.html

• Contacts.html

• Info.html

进入主 div（右侧：div id="content"），然后按返回箭头，它只是将我带到 index.php 并加载了 indexview.html 页面（而不是向我显示联系人->照片->索引视图）。

我已经在网络上进行了一些搜索，发现我应该构建一些可以获取 url 的东西，这要归功于事件处理程序“popstate”。我已经对此进行了一些研究，或者研究了一个可以让我处理所有这些的小框架，但是，我仍然没有完全理解我应该做什么。左边的项目不是“<a> 链接”，当然也没有 href 属性。我是否必须用 <a> 元素替换每个项目（现在是 li 项目）？如果是这样，我该如何继续让历史按我的意愿工作？
附：当然，每次我将某些内容加载到我的正确 div 中（例如 photo.html、contacts、html 等）时，我的 url 都不会改变。

这是一个小 jsfiddle（不确定它是否有帮助：怀疑）。单击菜单中的任何项目会使 jquery load() 成为右侧 div 中的 html 页面（“覆盖”您“找到 Welcome 的 div，这是...等的集成信息管理系统 Web 界面！”）。

http://jsfiddle.net/5by64tsn/

   $("#listContact").click(function(){
    $("#content").load('view/contacts.html');
    document.title = 'Contacts';
});

当我点击 listContact 时，contacts.html 被加载到内容 div 中。

Answer 1

您希望完成的不是 Ajax/浏览器历史记录的工作方式。 Ajax 调用独立于浏览器的历史记录，并且不影响后退/前进按钮，无需添加代码即可。您提到了popState，这与您想要的很接近。你实际上想要pushState。

// Add the url to history
window.history.pushState(null, null, [url that you load via Ajax goes here]);

使用您的示例：

$("#listContact").click(function(){
    $("#content").load('view/contacts.html');
    document.title = 'Contacts';
    window.history.pushState(null, null, '/view/contacts.html'); // You'll need to add a leading '/' otherwise the url will just keep appending the relative path
});