jQuery(document).ready(function($){ $('a.other').click(function(){ $("div#time").css('visibility','hidden'); return false; }); });
まあ、こんな感じのjavascriptがあったとしましょう。クリックしたら消える(厳密に言うと見えなくする)
というやつです。
emptyとdisplay noneとvisibility hiddenで何が違うのか。
empty()
要素自体の削除。消した要素は元には戻らないので、もう一度要素を追加(append)しないといけない。
css('display', 'none')
要素を見えなくする。見えなくするのだが、その要素を削除して見えなくするので、次の要素を詰める
css('visibility', 'hidden')
要素を見えなくするのだが、見えなくした要素はそのまま残るから次の要素は移動しない
例えば、こんな感じの超簡単なHTMLを作成しましょう。結果は推して知るべし、「ほむら」と「まどか」が表示されるだけの簡単なやつ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./js/jquery-1.4.4.min.js" type="text/javascript"></script> </head> <div id="hoge"> ほむら </div> <script type="text/javascript">//<!-- jQuery(document).ready(function($){ $("div#hoge").css('visibility','hidden'); // $("div#hoge").empty(); // $("div#hoge").css('display','none'); return false; }); //--></script> <div id="homu"> まどか </div>
もとのHTMLはこちら
emptyとdisplay noneはこちら
visibility hiddenはこちら
まあ、いろいろと使い分けたら良いと思うよ。
ちなみに、アンカータグにはempty,display none,visibility hiddenいずれを使っても
リンクには飛びません。