javascript - リフレッシュ後のブロックの表示と非表示

Question

ページを更新した後、非表示のブロックの状態を保持したいと考えています。ページを更新すると、ブロック「非表示」が「表示」になりました。お願い助けて。

Answer 1

これにはCSS3 :target疑似セレクターが必要ですが、実行可能な解決策になる可能性があります。

CSS:

#myblock {
    width:100px;
    height:100px;
    background-color:#3a6d90;
    display:none; // div starts out as hidden
}

#myblock:target {
    display:block;
}

HTML:

<a href='javascript:showBlock();'>Show It</a>
<div id='myblock'></div>

Javascript:

function showBlock() {
    document.getElementById('myblock').style.display = "block";
    window.location.hash = "myblock"; // set url hash
}

このソリューションは、要素が を介して表示されるときに、現在のアドレスに URL ハッシュを追加することによって機能しますshowBlock()。#myblock:target#myblock ハッシュが存在する場合、display プロパティを「block」に設定することで魔法のように動作します。

Answer 2

更新時に「隠し」値 (true/false) をサーバーに戻し、ページが読み込まれるたびにそれを割り当てることをお勧めします (最初の訪問のデフォルト値を設定することを忘れないでください)。

コード サンプルを投稿するか、使用しているテクノロジ (.NET、MVC3 など) を教えていただければ、その方法を開始するためのサンプル コードまたはリソースを提供できます。