加载外部页面，更新浏览器中的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>