0

I've managed to get my main navigation to work so that JQ loads the content HTML from another file and places them as the innerHTML of my main content div. However, each time that I refresh the page it returns me to the default state of the file, that is without the content that was dynamically altered via JQ. Also, I can't figure out a way to link to the index page with the altered content since the URL stays the same. Any idea on how to do these things?

Here's the function used for dynamically altering the content:

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

2 に答える 2

0

私があなたを正しく理解している場合、あなたの問題は、クライアントで行った変更をサーバーにプッシュしたり、何らかの方法で保存したりしていないことです。いくつかのオプションがあります。

  • HTMLファイルに変更を加えることができるサーブレットをサーバー上に作成します（クライアントで行われた変更は他のすべてのクライアントに引き継がれるため、お勧めしません）。
  • Cookieを使用する：ファイルに変更が加えられたときにCookieを配置できるため、ページが更新されたときに変更を読み込むことができます
  • HTML 5ローカルストレージを使用する：Cookieと同じ概念ですが、より新しく、おそらくより優れています。
于 2012-08-15T00:39:10.350 に答える
0

私はこれらの関数を別のWebサイト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があることを確認してください。そうでない場合は、このコードを少し変更する必要があります。

于 2012-08-15T00:46:16.307 に答える