選項卡原身是Windows操作系統(tǒng)的一個創(chuàng)意，即通過交換選項，讓很多項目信息輪替顯示在大小和位置都固定的小塊區(qū)域里。因此選項卡具有占用篇幅小，輻射內容大的特點。一個典型的例子是你打開IE瀏覽器，依次點擊“工具”-“Internet選項”，這個表單就是一個選項卡典型布局。當然了，這里所說的選項卡效果是要在Web頁面實現的，并非應用程序里的菜單選項，在網頁中應用選項卡可以使網頁顯得更緊湊，結合AJAX技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹一種簡潔的選項卡效果的實現，兼容性較好，方便大家直接使用。

以下是引用片段：
<style type="text/css">
body {
 margin:0px;
 text-align:center;
 font-size:12px;
}
#divall {
 margin:auto;
 margin-top:35px;
 width:300px;
 height:200px;
 background-color:#7DA7D9;
 border:0px;
}
#title {
 width:300px;
 height:20px;
 font-size:14px;
 margin-top:4px;
}
#table1 table {
 width:300px;
 height:30px;
 font-size:12px;
}
#table2 table {
 width:300px;
 height:30px;
 font-size:12px;
}
#content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 {
 margin:auto;
 height:110px;
 width:290px;
 background-color:#eee;
 position:relative;
}
#content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div {
 position:absolute;
 bottom:3px;
 right:3px;