奥義「転身」（てんしん）
〜同一画面内領域の表示と非表示の切り替え〜
領域の表示と非表示
ある程度JavaScriptが使えるようになってくると、フォームを使ってその答えによって処理を分け、
そして出された答えを別のページに表示する、ということもできるようになる。
しかし、別のページに表示するとなるとページ間での情報の受け渡しが難しい場合もある。
そこで、情報を入力するページと結果を表示するページを一つにまとめ、
領域の表示と非表示を切り替えることによって、あたかも別のページに表示されているように見せかけて
フォームなどを使ったちょっと高度なページ作りにチャレンジするための第一歩となるのがこの技である。

奥義「転身」（てんしん）〜領域の表示と非表示の切り替え〜

Head内に次のように書き込む

<style type="text/css">
<!--
#box1{領域の大きさなどの設定;display:block;}
#box2{領域の大きさなどの設定;display:none;}
-->
</style>
<script language="JavaScript">
<!--
function Tensin(num){
hako1=document.getElementById("box1");
hako2=document.getElementById("box2");
switch(num){
case 0: 
hako1.style.display="none";
hako2.style.display="block";
break;
case 1: 
hako1.style.display="block";
hako2.style.display="none";
break;
}
}
-->
</script>


Body内に次のように書き込む

<div id="box1">内容１</div>
<div id="box2">内容２</div>
<form>
<input type="button" value="内容1の表示" onclick="Tensin(1)">
<input type="button" value="内容２の表示" onclick="Tensin(0)">
</form>


実行結果

display:block;・・・表示にする

display:none;・・・非表示にする



hako1=document.getElementById("box1");

「box1」という名前の領域に

新たに「hako1」と名前をつける



hako1.style.display="none";

領域「hako1(box1)」を非表示にする



hako1.style.display="block";

領域「hako1(box1)」を表示する





<div　id="box1">〜</div>

領域に「box1」という名前を付ける



Tensin(0)

「box1」を非表示、「box2」を表示



Tensin(1)

「box1」を表示、「box2」を非表示