サイトのお知らせメッセージ

質問

サイトのお知らせメッセージ
こんばんわ。
いま、自分のサイトを作っているのですが、いろいろと悩んでおります；
やりたいことはこうです。
まず、ページの中に<DIV>で囲まれたお知らせメッセージがあるとします。これを閉じるボタンをそのページ内に設置して、その閉じるボタンをクリックするとメッセージの<DIV>が非表示になるようにしました。
これはできたんです。
しかし閉じるボタンをクリックして<DIV>を閉じても、ブラウザの更新ボタンを押すと普通に表示されます。
私が思うに、クッキーのナンチャラカンチャラを使えば、一回閉じた<DIV>はそのパソコンではクッキーを破棄しないかぎり非表示に...みたいなことができるとおもうんですが詳しくないので出来ないんです。
なので、指定したidのdivタグをdisplay: none;にするボタンをクリックすると次回からずーっと<DIV>が非表示になるようなものは作れないでしょうか。どなたかこの素人に教えてください。よろしくおねがいします。

回答No.1

naokita · ベストアンサー

クッキーじゃないけど履歴なら可能。
一回しか見れないって事。（履歴期限が過ぎれば回覧可能）
そこまで作れるスキルがあるなら可能でしょ？

/* CSS */
#inout *{ margin:0; padding:0;}
#inout .open{ margin:1em; width: 300px; height: 6em; border:1px solid gray; overflow:scroll;}
#inout dl{ margin:.5em; width:500px;}
#inout dt{ float:left;}
#inout dd{ padding-left:6em;}
#inout a{ display:block; color:blue;}
#inout a:visited{ display:block; margin:-9em 0 0; visibility:hidden;}
#inout .close{position: relative; z-index:1; padding:1em; background:white;}

<!-- HTML -->
<div id="inout"><h2>開閉サンプル</h2>
<div class="open">
<h3>NEWS</h3>
<dl>
<dt>'10/4/25</dt><dd>晴れ</dd>
<dt>'10/4/17</dt><dd>ゆき</dd>
<dt>'10/4/16</dt><dd>スクロールスクロールスクロール</dd>
</dl>
</div>
<a href="#inout">閉じるボタン</a>
<p class="close">
下に縦幅がお知らせ以上のdivかpを作り、背景色を白にして同化。<br />
この部分が、クリックしたら上に上がるから<br />
「お知らせ」をdisplay:none;にしなくても隠れる。<br />
そして、a:visitedだから、<br />
F5更新や再訪問では開かないが、履歴を削除すれば開く。<br />
逆パターンは、onclickで作った事があるが、これは始めて作った。
</p>
</div>

お礼

JavaScriptも使わずにここまで出来るとは・・・
いや、私の知識不足かもしれませんが＾＾；
本当にありがとうございます。いろいろ応用してみます！