加载外部页面，在浏览器中更新 URL 并在浏览器刷新时保留页面

Question

我正在尝试使用 Bootstrap 3 构建网站演示（因为 IE7/8 支持）。固定导航有 4 个菜单锚点，它们链接到主题的登录页面。每个菜单都有下拉菜单，其中包含 [x] 个子菜单。

页面必须是静态的，并从外部纯 .htmls 页面引入内容。我已经使用

$(function(){
    $("#submenu a").click(function(e){
        e.preventDefault(); //To prevent the default anchor tag behavior
        var url = this.href;
        $(".container").load(url);
    });
});

我的问题

• 当使用 location.hash 方法刷新页面时，我似乎无法让 URL 保持不变。
• 从下拉菜单中单击子菜单时，它会加载到同一个主页容器中。

我的页面

到目前为止，我的做法是：主页有一个带有下拉子菜单的菜单导航。 带有导航和菜单的主页

当您单击“菜单”链接时，它会转到该页面。此 html 再次具有相同的导航，但 active 菜单 href 没有下拉菜单，但显示为带有 nav-pills 的新 div，单击时运行上述 load() 脚本。

将子菜单作为新 div 的菜单登录页面

。其他菜单链接仍然具有下拉功能，因为它们未处于活动状态。

我想要达到的目标

1. 从主页，在更新 url 的同时将外部 MENU.htmls 或 SUBMENU.html 加载到同一个 div 容器中。
2. 如果我与某人共享该网址，则打开的页面会包含该特定内容
3. 如果单击菜单页面和active，请更新导航以将其子菜单包含在新的 div 区域中，同时禁用下拉菜单（但下拉菜单在响应模式下仍适用于 collapse）。这样我就不必为每个页面添加不同的标题。其他菜单链接仍然具有下拉功能，因为它们未处于活动状态。
4. 浏览器刷新时重新加载包含内容的同一页面
5. 基本上这是我想要的结果：

感谢任何反馈、建议、示例链接等。 提前致谢

---

更新：我无法让代码从头开始工作，但是我在 Single Page Applications 上找到了一个视频，它提供了一个我想要发生的事情的示例......

Answer 1

我认为你的意思是这样的

$(function() {
  $("#submenu a").click(function(e) {
    e.preventDefault(); //To prevent the default anchor tag behavior
    $("#submenu a").removeClass("active")
    var url = this.href;
    var hash = new URL(url).hash;
    // localStorage.setItem("hash",hash)
    $(this).addClass("active");
    $(".container").load(url);
    location.hash = hash;
  });
  var hash = new URL(location.href).hash; // localStorage.get("hash");
  if (hash) { // if url / localStorage had a hash
    $("a[href='#" + hash + "']").click();
  }  
});

#submenu a { text-decoration:none}
#submenu a.active { text-decoration: underline}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="submenu">
  <a href="#page1">Page 1</a><br/>
  <a href="#page2">Page 2</a><br/>
  <a href="#page3">Page 3</a><br/>  
</div>  

<div id="container"><div>