あるページに最初に訪れた際に、一部分を表示させてみたり、非表示にさせてみたりする方法が分からなかったので、その方法を調べていたところ、javascriptのdisplayを使うことで、うまく実装できました。 以下はそのソースです。
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>javascript display</title> <style type="text/css"> div#disp { display: none; } </style> <script> function hyoji1(num) { if (num == 0) { document.getElementById("disp").style.display="block"; } else { document.getElementById("disp").style.display="none"; } } </script> </head> <body> <p>下のリンクをクリックすると、本文の表示と非表示ができます</p> <form> <input type="button" value="表示" onclick="hyoji1(0)"> <input type="button" value="非表示" onclick="hyoji1(1)"> </form> <div id="disp"> <p>2段階のプルダウンメニューを作る<br> 角丸タブを使ったタブボックスを作る<br> ドロップダウンメニューを作ろう<br> ページ移動せずに内容を変更するタブを作る</p>
このページにアクセスした際、フォームボタンの下部を非表示にさせています。
表示ボタンを押すと・・・
表示ボタン下部に非表示にさせていた部分が表示されます。
最初から非表示させるのは、CSSで制御しています。
そして、ボタンのクリックで表示させたり、非表示にさせたりしています。
表示させる部分は、表示ボタンを押したときに、下に繰り下がります。
