JavaScript Part4

JavaScriptで表示・非表示

JavaScriptで表示・非表示を切り替える方法について記述します。
表示と非表示を切り替えるには、スタイルシートのdisplayを使用します。
詳細は、とほほのWWW入門のCSS - displayのページをご覧ください。

とほほのWWW入門 CSS - display

以下は、サンプルです。

サンプル

ポイント

初期状態はサンプル1が表示されます
マウスを文字列「サンプル1,2,3」の上に載せると表示が切り替わります

サンプルソース

<html charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
<title>JavaScriptサンプル4</title>
<style>
body {
background-color: white;
}
a:hover {
font-size: large;
text-decoration:underline double;
}
</style>
<script>
function switchBlock1Visible(){
  document.getElementById("t1").style.color = 'red';
  document.getElementById("t2").style.color = '';
  document.getElementById("t3").style.color = '';
  document.getElementById("t1").style.background = 'lightgrey';
  document.getElementById("t2").style.background = '';
  document.getElementById("t3").style.background = '';
  document.getElementById("Block1").style.display = 'block';
  document.getElementById("Block2").style.display = 'none';
  document.getElementById("Block3").style.display = 'none';
}

function switchBlock2Visible(){
  document.getElementById("t1").style.color = '';
  document.getElementById("t2").style.color = 'red';
  document.getElementById("t3").style.color = '';
  document.getElementById("t1").style.background = '';
  document.getElementById("t2").style.background = 'lightgrey';
  document.getElementById("t3").style.background = '';
  document.getElementById("Block1").style.display = 'none';
  document.getElementById("Block2").style.display = 'block';
  document.getElementById("Block3").style.display = 'none';
}

function switchBlock3Visible(){
  document.getElementById("t1").style.color = '';
  document.getElementById("t2").style.color = '';
  document.getElementById("t3").style.color = 'red';
  document.getElementById("t1").style.background = '';
  document.getElementById("t2").style.background = '';
  document.getElementById("t3").style.background = 'lightgrey';
  document.getElementById("Block1").style.display = 'none';
  document.getElementById("Block2").style.display = 'none';
  document.getElementById("Block3").style.display = 'block';
}

</script>
</head>

<body onload="switchBlock1Visible()">
<h2>表示と非表示</h2>

<a onmouseover="switchBlock1Visible()"><span id="t1">サンプル1</span></a>
<a onmouseover="switchBlock2Visible()"><span id="t2">サンプル2</span></a>
<a onmouseover="switchBlock3Visible()"><span id="t3">サンプル3</span></a>
<br>
<br>

<span id="Block1"  style="display:none">
<table border=1><tr><td>
<br>
サンプル1の内容
<br>
<br>
</td></tr></table>
</span>

<span id="Block2"  style="display:none">
<table border=1><tr><td>
<br>
サンプル2の内容
<br>
<br>
</td></tr></table>
</span>

<span id="Block3"  style="display:none">
<table border=1><tr><td>
<br>
サンプル3の内容
<br>
<br>
</td></tr></table>
</span>

</body>
</html>

以上