jQuery UI API - 標簽頁部件（Tabs Widget） · W3School jQuery UI 教程

# jQuery UI API - 標簽頁部件（Tabs Widget） ## 所屬類別 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**一種多面板的單內容區，每個面板與列表中的標題相關。 **版本新增：**1.0 標簽頁（Tabs）通常用于把內容分成多個部分，以便節省空間，就像折疊面板（accordion）一樣。標簽頁（Tabs）有一組必須使用的特定標記，以便標簽頁能正常工作： * 標簽頁（Tabs）必須在一個有序的（`<ol>`）或無序的（`<ul>`）列表中 * 每個標簽頁的 "title" 必須在一個列表項（`<li>`）的內部，且必須用一個帶有 `href` 屬性的錨（`<a>`）包裹。 * 每個標簽頁面板可以是任意有效的元素，但是它必須帶有一個 id，該 id 與相關標簽頁的錨中的哈希相對應。每個標簽頁面板的內容可以在頁面中定義好，或者可以通過 Ajax 加載。這兩種方式都是基于與標簽頁相關的錨的 `href` 上自動處理的。默認情況下，標簽頁在點擊時激活，但是通過 [`event`](#option-event) 選項可以改變或覆蓋事件。下面是一些樣品標記： ``` <div id="tabs"> <ul> <li><a href="#fragment-1">一</a></li> <li><a href="#fragment-2">二</a></li> <li><a href="#fragment-3">三</a></li> </ul> <div id="fragment-1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> ``` ### 鍵盤交互當焦點在標簽頁上時，下面的鍵盤命令可用： * UP/LEFT：移動焦點到上一個標簽頁。如果在第一個標簽頁上，則移動焦點到最后一個標簽頁。在一個短暫的延遲后激活獲得焦點的標簽頁。 * DOWN/RIGHT：移動焦點到下一個標簽頁。如果在最后一個標簽頁上，則移動焦點到第一個標簽頁。在一個短暫的延遲后激活獲得焦點的標簽頁。 * HOME：移動焦點到第一個標簽頁。在一個短暫的延遲后激活獲得焦點的標簽頁。 * END：移動焦點到最后一個標簽頁。在一個短暫的延遲后激活獲得焦點的標簽頁。 * SPACE：激活與獲得焦點的標簽頁相關的面板。 * ENTER：激活或切換與獲得焦點的標簽頁相關的面板。 * ALT+PAGE UP：移動焦點到上一個標簽頁，并立即激活。 * ALT+PAGE DOWN：移動焦點到下一個標簽頁，并立即激活。當焦點在面板上時，下面的鍵盤命令可用： * CTRL+UP：移動焦點到相關的標簽頁。 * ALT+PAGE UP：移動焦點到上一個標簽頁，并立即激活。 * ALT+PAGE DOWN：移動焦點到下一個標簽頁，并立即激活。 ### 主題化標簽頁部件（Tabs Widget）使用 [jQuery UI CSS 框架](api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用標簽頁指定的樣式，則可以使用下面的 CSS class 名稱： * `ui-tabs`：標簽頁的外層容器。當設置了 [`collapsible`](#option-collapsible) 選項時，該元素會另外帶有一個 `ui-tabs-collapsible` class。 * `ui-tabs-nav`：標簽頁列表。 * 導航中激活的列表項會帶有一個 `ui-tabs-active` class。內容通過 Ajax 調用加載的列表項會帶有一個 `ui-tabs-loading` class。 * `ui-tabs-anchor`：用于切換面板的錨。 * `ui-tabs-panel`：與標簽頁相關的面板。只有與其對應的標簽頁激活時才可見。 ### 依賴 * [UI 核心（UI Core）](ref-ui-core.html) * [部件庫（Widget Factory）](api-jQuery-widget.html) * [特效核心（Effects Core）](ref-effects-core.html)（可選的；當與 [`show`](#option-show) 和 [`hide`](#option-hide) 選項一起使用時） ### 附加說明 * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## 實例一個簡單的 jQuery UI 標簽頁（Tabs）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>標簽頁部件（Tabs Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="tabs"> <ul> <li><a href="#fragment-1"><span>一</span></a></li> <li><a href="#fragment-2"><span>二</span></a></li> <li><a href="#fragment-3"><span>三</span></a></li> </ul> <div id="fragment-1"> <p>第一個標簽是默認激活的：</p> <code>$( "#tabs" ).tabs(); </code> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <script> $( "#tabs" ).tabs(); </script> </body> </html> ```