重疊的 DIV 區塊

將數個 DIV 區塊重疊放在一起，蓋在下面的內容會看不見。然後用 javascript 選擇要顯示的區塊。

範例說明：
1. 可以使用 風格表的 position 與 top 特徵，將數個 DIV 區塊重疊放在一起。
2. 使用 onclick 事件操控器，啟動函式。
3. 動態設定 style 物件，使重疊的區塊只有一個會顯示。

<script type='text/javascript'> function showHide( n ) { var pages=3; // Total pages for( ; pages>0; pages--) document.getElementById('page'+pages). style.display='none'; document.getElementById('page'+n). style.display=''; } </script> <style type='text/css'> .ovl {width:300px; height:200px; background:#337; } </style> <span onclick='showHide(1)'>第一頁</span> | <span onclick='showHide(2)'>第二頁</span> | <span onclick='showHide(3)'>第三頁</span> <div> <div id='page1' class=ovl> 第一頁 <p>射擊遊戲, 好玩遊戲。 </div> <div id='page2' class=ovl style='display:none;background:#377'> 第二頁 <p>益智遊戲, 小遊戲。 </div> <div id='page3' class=ovl style='display:none;background:#737'> 第三頁 <p>搏擊遊戲, 賽車遊戲。 </div> </div>