將數個 DIV 區塊重疊放在一起，蓋在下面的內容會看不見。然後用 javascript 選擇要顯示的區塊。
- 範例說明：
- 可以使用 風格表的 position 與 top 特徵，將數個 DIV 區塊重疊放在一起。
- 使用 onclick 事件操控器，啟動函式。
- 動態設定 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> - 執行結果：
第一頁 | 第二頁 | 第三頁
第一頁射擊遊戲, 好玩遊戲。
