わびさびサンプルソース

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

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

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

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

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

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

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

  • ページ１→display:block(表示)
  • ページ２→display:none
  • ページ３→display:none

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

  • ページ１→display:none
  • ページ２→display:block(表示)
  • ページ３→display:none

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

  • ページ１→display:none
  • ページ２→display:none
  • ページ３→display:block(表示)

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

?
CSSの'display:none'によるページの切り替え
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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>

実行結果




デジカメ写真をＰＣに取り込み！！
(iPhone対応)
簡単デジカメ写真取り込み(無料)です。


「プロ生ちゃんカレンダー作成」無料です


ＰＣとスマフォでスケジュールを管理！！
Googleカレンダーと同期できるスケジューラ
FavGCalScheduler無料です。


動画をサムネイル表示で管理！！
大量の動画を直観的に管理できます。
FavMovieAlbum無料です。

わびさびサンプルソース

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