加載外部頁面，更新瀏覽器中的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. 基本上這是我想要的結果是：

任何反饋，建議，示例鏈接等，我們感激不盡。 提前致謝

---

更新：我無法使代碼從頭開始工作，但是我在“ 單頁應用程序”上找到了一個視頻，該視頻提供了我想發生的事情的示例...

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>