JS動態內容鏈接

Question

我設法使主導航正常工作，以便JQ從另一個文件加載內容HTML，並將其放置為我的主要內容div的innerHTML。 但是，每次刷新頁面時，它都會使我返回到文件的默認狀態，即沒有通過JQ動態更改的內容。 另外，由於URL保持不變，因此我無法找到一種鏈接到具有更改內容的索引頁面的方法。 關於如何做這些事情的任何想法？

這是用於動態更改內容的函數：

$(document).ready(function() {                                                                                                                            
  $('#menu_items').on('click', '#menu_items a', function(event) {                                                                                   
    event.preventDefault();                                                                                                                   
    var href = $(this).attr('href');                                                                                                          
    $('#main_content').load(href);                                                                                                            
  });
});

Answer 1

如果我理解正確，那么您的問題是您沒有將在客戶端上所做的更改推送到服務器，也沒有以任何方式存儲它們。 您有幾種選擇：

• 在服務器上創建一個servlet，該servlet允許對HTML文件進行更改（我不建議您這樣做，因為在客戶端上進行的任何更改都會繼承到所有其他客戶端上）。
• 使用cookie：只要對文件進行更改，就可以放置cookie，以便在刷新頁面時加載更改
• 使用HTML 5本地存儲：與Cookie相同的概念，但較新且可能更好。

Answer 2

我完全從另一個網站http://www.quirksmode.org/js/cookies.html完全竊取了這些功能，但這是您簡化此操作所需的。

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

$(document).ready(function() { $('#main_content').load($("#"+readCookie("content")).attr('href')); $('#menu_items').on('click', '#menu_items a', function(event) { event.preventDefault(); var href = $(this).attr('href'); $('#main_content').load(href); createCookie("content",$(this).attr('id'), 1); }); });

只需確保所有菜單鏈接都具有一個ID，否則您將不得不稍微更改此代碼。