0

基本的に、私はdisplayを使用します。デフォルトでは1つの要素でnoneを使用し、別の見出しがクリックされた後、javascriptを使用して非表示の要素を別の要素に切り替えます。現在、私の実装は完全に機能しています。

唯一の問題は、ページをリロードすると、元の状態を維持するのではなく、デフォルトに戻ることです。

このコードで起こっていることは、関数hideUnhideで非表示になっている要素のヘッダーをバインドすることです。クリックすると、現在の要素を非表示にし、以前に非表示にした要素を表示してから、ヘッダーのcssを設定して、非表示の要素をリンクのように見せ、表示された要素をヘッダーのように見せます。

$(document).ready(function() {
    var unclicked = $('.unclickedTeam');
    unclicked.bind("click", hideUnhide);
});

function hideUnhide() {
    var unclicked = $('.unclickedTeam');
    var clicked = $('.currentTeam');
    var displayedTeam = $('.displayedTeam');
    var hiddenTeam = $('.hiddenTeam');

    displayedTeam.css('display', 'none');
    hiddenTeam.css('display', 'block');

    displayedTeam.addClass('hiddenTeam');
    displayedTeam.removeClass('displayedTeam');

    hiddenTeam.addClass('displayedTeam');
    hiddenTeam.removeClass('hiddenTeam');

    unclicked.addClass('currentTeam');
    unclicked.removeClass('unclickedTeam');

    clicked.addClass('unclickedTeam');
    clicked.removeClass('currentTeam');

    unclicked.unbind();
    clicked.bind("click", hideUnhide);
}

どうすればその状態をそのまま保存できますか？ヘッダーがクリックされたときに互いにジャンプする2つの別々のページを作成することは別として。

4

2 に答える 2

3

localStorage を使用して、以前の状態を保存できます。

localStorage.setItem("hide", "yes"); // Set state

if(localStorage.getItem("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

LocalStorage はほとんどのブラウザーと互換性があります。参照: http://www.html5rocks.com/de/features/storage

ブラウザの互換性

確認したい場合は、Cookie と JavaScript も使用できます。
この JS 関数を使用して、Cookie を作成/削除できます。

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

function getCookie(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;
}

JavaScript を使用する方法のサンプルを次に示します。

setCookie("hide", "yes", 43200); // Set state (expire in 30 days)

if(getCookie("hide") == "yes") {
    alert('...'); // Do something if "hide" is set
}

両方をテストし、動作しました。

于 2013-03-11T09:05:09.133 に答える
1

localStorageたとえば、次のように、ページの状態を保存するために使用できます

window.localStorage.setItem( 'stateTeam1', 'hidden' );

コード全体に 2 つの追加が必要になります。

  1. メソッド内で、hideUnhideのエントリを更新する必要がありますlocalStorage。
  2. ページロード時に、状態を抽出してlocalStorageプロパティ セットを適用する必要があります。

caniuse で見られるように、ブラウザのサポートは非​​常に優れています。

于 2013-03-11T08:59:31.277 に答える