タグにCSSのスタイル'display:none'を適用すると、適用されたタグを含むその子供のタグ に関しても非表示にする事ができます。非表示になった領域は、そこに何も存在しない扱いとなり再レイアウト された際に、間が詰められます。
この性質を利用して、'display:none'と'display:block'を切り替える事でＵＲＬによる ページ遷移を発生させずに、疑似的にページ遷移を再現します。
選択されたページだけ'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'>
ページ１です。
<ul>
<li>ページ１の中身
</ul>
</div>
<div id='page2' class='page2'>
ページ２です。
<ul>
<li>ページ２の中身
</ul>
</div>
<div id='page3' class='page3'>
ページ３です。
<ul>
<li>ページ３の中身
</ul>
</div>
</body>
</html>
