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，允许对HTML文件进行更改（我不推荐它，因为客户端上的任何更改都会转移到所有其他客户端）。
使用cookies：只要对文件进行了更改，您就可以放置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，否则您必须稍微更改此代码。

JS动态内容链接

2 个答案: