わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。

CSSの'display:none'によるページの切り替え

タグにCSSのスタイル'display:none'を適用すると、適用されたタグを含むその子供のタグ に関しても非表示にする事ができます。非表示になった領域は、そこに何も存在しない扱いとなり再レイアウト された際に、間が詰められます。

この性質を利用して、'display:none'と'display:block'を切り替える事でURLによる ページ遷移を発生させずに、疑似的にページ遷移を再現します。

ページ遷移させずにページを切り替える

選択されたページだけ'display:block'に設定する事で常に1つのページだけ見えるようにします。

ページ1が選択された場合

  • ページ1→display:block(表示)
  • ページ2→display:none
  • ページ3→display:none

ページ2が選択された場合

  • ページ1→display:none
  • ページ2→display:block(表示)
  • ページ3→display:none

ページ3が選択された場合

  • ページ1→display:none
  • ページ2→display:none
  • ページ3→display:block(表示)

見えているブロックが変化するだけですが、ページ遷移しているように見えます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.page1 {
	display:block;
	width:320px;
	height:320px;
	background-color:red;
	color:white;
	font-weight:bold;
}
.page2 {
	display:none;
	width:320px;
	height:320px;
	background-color:green;
	color:white;
	font-weight:bold;
}
.page3 {
	display:none;
	width:320px;
	height:320px;
	background-color:blue;
	color:white;
	font-weight:bold;
}
</style>
<script type="text/javascript" language="javascript">
<!--
function SelectPage( page ) {
	/*
		各ページのエレメントを取得
	*/
	var elementPage1 = document.getElementById( "page1" );
	var elementPage2 = document.getElementById( "page2" );
	var elementPage3 = document.getElementById( "page3" );

	switch( page ) {
	case 1:
		elementPage1.style.display = 'block';
		elementPage2.style.display = 'none';
		elementPage3.style.display = 'none';
		break;

	case 2:
		elementPage1.style.display = 'none';
		elementPage2.style.display = 'block';
		elementPage3.style.display = 'none';
		break;

	case 3:
		elementPage1.style.display = 'none';
		elementPage2.style.display = 'none';
		elementPage3.style.display = 'block';
		break;
	}
};
// -->
</script>
</head>
<body>
<h1>CSSの'display:none'によるページの切り替え</h1>
<input type='button' value='page1を表示' onclick="SelectPage(1);">
<input type='button' value='page2を表示' onclick="SelectPage(2);">
<input type='button' value='page3を表示' onclick="SelectPage(3);">
<div id='page1' class='page1'>
ページ1です。
	<ul>
	<li>ページ1の中身
	</ul>
</div>
<div id='page2' class='page2'>
ページ2です。
	<ul>
	<li>ページ2の中身
	</ul>
</div>
<div id='page3' class='page3'>
ページ3です。
	<ul>
	<li>ページ3の中身
	</ul>
</div>
</body>
</html>

実行結果






わびさびサンプルソース

WindowsやHTML5などのプログラムのサンプルコードやフリーソフトを提供します。