鍍金池/ 教程/ HTML/ jQuery UI Tab 示例（一）
jQuery UI Tab 示例（一）
jQuery UI Datepicker 示例（四）
jQuery UI 示例
jQuery UI Slider 示例（二）
jQuery UI Dialog 示例（一）
HTML Get
動畫效果
終止動畫
回調(diào)函數(shù)
方法鏈
jQuery UI Button 示例（一）
jQuery UI Autocomplete 示例（三）
jQuery UI Autocomplete 示例（二）
設(shè)置或取得元素的 CSS class
jQuery UI 概述
基本語法
jQuery UI Datepicker 示例（一）
jQuery UI Autocomplete 示例（一）
jQuery UI Spiner 示例
jQuery UI Tab 示例（二）
淡入淡出效果
顯示/隱藏內(nèi)容
HTML Set
jQuery UI Tooltip 示例
jQuery UI Slider 示例（一）
讀寫 HTML 元素的 css 屬性
jQuery UI Datepicker 示例（二）
添加HTML元素
操作 HTML 元素的大小
jQuery UI Datepicker 示例（五）
滑動效果
jQuery UI Dialog 示例（二）
jQuery UI Menu 示例
jQuery UI 基本工作過程
jQuery UI Button 示例（二）
jQuery UI Dialog 示例（三）
jQuery UI Datepicker 示例（三）
Selectors
jQuery UI Progressbar 示例
Events
jQuery UI Accordion 示例
刪除HTML元素

jQuery UI Tab 示例（一）

Tab 顯示多個標(biāo)簽頁，每個標(biāo)簽含有一個標(biāo)簽頭和一個 Panel（顯示標(biāo)簽的內(nèi)容）。

基本用法

首先使用 HTML 定義用來作為 Tab，一般使用列表（ul ,li) 來定義標(biāo)簽頁的標(biāo)題，每個標(biāo)題使用href 鏈接到每個頁面的內(nèi)容頁，比如下例定義了三個標(biāo)簽頁：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, </p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, </p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. </p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, </p>
    </div>
</div>

然后使用 jQuery 的 tabs()方法把這部分 Html 元素變?yōu)闃?biāo)簽頁

<script>
    $(function () {
        $("#tabs").tabs();
    });
</script>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/56.png" alt="" />