選項卡，也稱頁簽，英文用Tab(Module-Tabs)表示。Tab將不同的內容重疊放在一個布局塊內，重疊的內容區里每次只有其中一個是可見的。
Tab可以在相同的空間里展示更多的信息，它把相似的主題分為一類，用戶更好理解。Tab的應用可以縮短頁面屏長，降低信息的顯示密度，同時又不犧牲信息量。在這種趨勢下，Tab這種交互元素成為了一個越來越普遍的應用。
Web里Tab可能最早2005年是amazon.com的首頁引入的，如今各大門戶，電商及各色網站的首頁都采用了Tab表現形式。當前Sina和網易首頁使用的Tab不下10處，在門戶主要靠廣告收入的情景下，首頁的位置尺寸是寸土寸金啊。
Sina首頁 2014.11.13
Sohu首頁 2014.11.13
Tab特點
- 每個頁簽由標題區和內容區組成
- 內容區和標題一一對應
- 至少有兩組頁簽以便可以切換
- 所有頁簽只有兩種狀態：選中和未選中，頁面載入后默認顯示第一個
- 選中頁簽(當前頁簽)只有一個並突出高亮顯示
- 鼠標點擊或移上時切換
標准的Tab標題設計時放在頂部，也有很多放在左側的
放在底部和右側的標題較為少見，這不符合人的閱讀習慣。
Tab的內容載入方式
通常有三種方式
- html片段: 這種方式最常見，tab內容在頁面打開后就載入了，缺點是頁面內容較多非第一幀內容也加載了導致頁面打開較慢
- iframe請求: 很多廣告采用這種方式，可以加快頁面載入，缺點是切換后不能立即展示
- Ajax請求: 通過異步請求拼接tab內容，優缺點同iframe
Tab實現
Tab的實現簡單，只要HTML結構合理，JS給標題添加click或mouseover事件然后切換顯示。這里采用HTML屬性配置的方式，主要通過3-5個屬性實現。
- data-ui="u-tab" ：Tab的外層包裹元素
- data-ui="tab-nav"：Tab的所有標題元素
- data-ui="tab-content"：Tab的所有內容元素
- data-ui="tab-arror"：Tab切換時的動畫元素
- data-iframe="http://xxx.jd.com/a.htm"：內容為iframe的Tab元素
示例1：最簡單的Tab只要添加前三個屬性
HTML結構如下
示例2：切換時當標題橫線帶有動畫效果
類似設計在京東首頁樓層Tab也有應用。和示例一對比只多了一個data-ui="tab-arror"。如下
示例3：iframe tab
這是京東首頁右側的“各類充值”，在標題元素上添加一個data-iframe屬性
Tab API
使用jQuery插件方式實現，配置參數如下
/**
* 頁簽組件
* $(x).tab({
* auto: // @boolean 是否自動切換，默認false
* evtType: // @string 默認mouseover，鼠標移動到上面時切換，可選click
* currCls: // @string 默認curr
* nav: // @string tab的css屬性選擇器的key，默認為 tab-nav
* content: // @string tab content的css屬性選擇器的key，默認為 tab-content
* arrow: // @string tab-arrow 切換時動態移動效果
* stay: // @number 自動切換的時間間隔
* defIndex: // @number 默認顯示的tab,
* isFade: // @boolean 默認false
* })
*/
當通過HTML屬性方式配置不能滿足需求時，可直接調用。此外添加了“change”事件，每當tab切換時會觸發。
$elem.tab({
evtType: evtType,
currCls: currCls,
auto: auto,
stay: stay,
nav: nav,
content: con,
defIndex: cur
})
// Tab change event
$elem.bind('change', function(ev, idx, $nav, $content) {
// todo
})
有了事件機制，可以輕松實現Ajax Tab，當切換時添加change事件，事件handler內部去執行Ajax請求，更新tab content。
相關：
http://blog.xiqiao.info/2009/07/03/409
http://www.smashingmagazine.com/2009/06/24/module-tabs-in-web-design-best-practices-and-solutions/