Tabs Widget · jQuery UI API 中文文檔 1.10

# Tabs Widget Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets") ## version added: 1.0 **Description:** 一種多panel（面板）的單內容區，每個panel（面板）與列表中的標題相關。 ## QuickNav[Examples](#entry-examples) ### Options + [active](#option-active) + [collapsible](#option-collapsible) + [disabled](#option-disabled) + [event](#option-event) + [heightStyle](#option-heightStyle) + [hide](#option-hide) + [show](#option-show) ### Methods + [destroy](#method-destroy) + [disable](#method-disable) + [enable](#method-enable) + [load](#method-load) + [option](#method-option) + [refresh](#method-refresh) + [widget](#method-widget) ### Events + [activate](#event-activate) + [beforeActivate](#event-beforeActivate) + [beforeLoad](#event-beforeLoad) + [create](#event-create) + [load](#event-load) 選項卡（Tabs）通常用于把內容分成多個部分，以便節省空間，就像折疊面板（accordion）一樣。選項卡（Tabs）有一組必須使用的特定標記，以便選項卡能正常工作： * 選項卡（Tabs）必須在一個有序的（`<ol>`）或無序的（`<ul>`）列表中 * 每個選項卡的 "title" 必須在一個列表項（`<li>`）的內部，且必須用一個帶有 `href` 屬性的錨（`<a>`）包裹。 * 每個選項卡panel（面板）可以是任意有效的元素，但是它必須帶有一個 id，該 id 與相關選項卡的錨中的哈希相對應。每個選項卡panel（面板）的內容可以在頁面中定義好，或者可以通過 Ajax 加載。這兩種方式都是基于與選項卡相關的錨的 `href` 上自動處理的。默認情況下，選項卡在點擊時激活，但是通過 [`event`](#option-event) 選項可以改變或覆蓋事件。下面是一些樣品標記： ``` <div id="tabs"> <ul> <li><a href="#fragment-1">One</a></li> <li><a href="#fragment-2">Two</a></li> <li><a href="#fragment-3">Three</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> ``` ### 鍵盤交互（Keyboard interaction）當焦點在選項卡上時，下面的鍵盤命令可用： * UP/LEFT：移動焦點到上一個選項卡。如果在第一個選項卡上，則移動焦點到最后一個選項卡。在一個短暫的延遲后激活獲得焦點的選項卡。 * DOWN/RIGHT：移動焦點到下一個選項卡。如果在最后一個選項卡上，則移動焦點到第一個選項卡。在一個短暫的延遲后激活獲得焦點的選項卡。 * HOME：移動焦點到第一個選項卡。在一個短暫的延遲后激活獲得焦點的選項卡。 * END：移動焦點到最后一個選項卡。在一個短暫的延遲后激活獲得焦點的選項卡。 * SPACE：激活與獲得焦點的選項卡相關的panel（面板）。 * ENTER：激活或切換與獲得焦點的選項卡相關的panel（面板）。 * ALT+PAGE UP：移動焦點到上一個選項卡，并立即激活。 * ALT+PAGE DOWN：移動焦點到下一個選項卡，并立即激活。當焦點在panel（面板）上時，下面的鍵盤命令可用： * CTRL+UP：移動焦點到相關的選項卡。 * ALT+PAGE UP：移動焦點到上一個選項卡，并立即激活。 * ALT+PAGE DOWN：移動焦點到下一個選項卡，并立即激活。 ### 主題（Theming）選項卡部件（Tabs Widget）使用 [jQuery UI CSS 框架](/theming/css-framework/) 來定義它的外觀和感觀的樣式。如果需要使用選項卡指定的樣式，則可以使用下面的 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`：用于切換panel（面板）的錨。 * `ui-tabs-panel`：與選項卡相關的panel（面板）。只有與其對應的選項卡激活時才可見。 ### 依賴（Dependencies） * [UI 核心（UI Core）](/category/ui-core/) * [部件庫（Widget Factory）](/jQuery.widget/) * [特效核心（Effects Core）](/category/effects-core/)（可選的；當與 [`show`](#option-show) 和 [`hide`](#option-hide) 選項一起使用時） ### Additional Notes: * 該部件要求一些功能性的 CSS，否則將無法工作。如果您創建了一個自定義的主題，請使用小部件指定的 CSS 文件作為起點。 ## Options ### active**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Integer](http://api.jquery.com/Types/#Integer) **Default:** `0`當前打開哪一個panel（面板）。**支持多個類型：** * **Boolean**:設置 `active` 為 `false` 將折疊所有的panel（面板）。這要求 [`collapsible`](#option-collapsible) 選項必須為 `true`。 * **Integer**: 激活打開的panel（面板）索引，以零為基礎。負值則表示從最后一個panel（面板）后退選擇panel（面板）。 **Code examples:** 初始化帶有指定 `active`選項的 Tab（選項卡）： ``` $( ".selector" ).tabs({ active: 1 }); ``` 在初始化后，獲取或設置`active` 選項： ``` // getter var active = $( ".selector" ).tabs( "option", "active" ); // setter $( ".selector" ).tabs( "option", "active", 1 ); ``` ### collapsible**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`當設置為 `true`時，激活的panel（面板）可以被關閉。**Code examples:** 初始化帶有指定 `collapsible`選項的 Tab（選項卡）： ``` $( ".selector" ).tabs({ collapsible: true }); ``` 在初始化后，獲取或設置`collapsible` 選項： ``` // getter var collapsible = $( ".selector" ).tabs( "option", "collapsible" ); // setter $( ".selector" ).tabs( "option", "collapsible", true ); ``` ### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Array](http://api.jquery.com/Types/#Array) **Default:** `false`哪些標簽被禁用。**支持多個類型：** * **Boolean**: 啟用或禁用所有選項卡。 * **Array**: 一個數組。包含從零開始計數的應該禁用選項卡的索引，例如，`[ 0, 2 ]`將禁用第一和第三個選項卡。 **Code examples:** 初始化帶有指定 `disabled`選項的 Tab（選項卡）： ``` $( ".selector" ).tabs({ disabled: [ 0, 2 ] }); ``` 在初始化后，獲取或設置`disabled` 選項： ``` // getter var disabled = $( ".selector" ).tabs( "option", "disabled" ); // setter $( ".selector" ).tabs( "option", "disabled", [ 0, 2 ] ); ``` ### event**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"click"`激活選項卡的事件類型。要懸停（hover）激活選項卡，用`"mouseover"`。**Code examples:** 初始化帶有指定 `event`選項的 Tab（選項卡）： ``` $( ".selector" ).tabs({ event: "mouseover" }); ``` 在初始化后，獲取或設置`event` 選項： ``` // getter var event = $( ".selector" ).tabs( "option", "event" ); // setter $( ".selector" ).tabs( "option", "event", "mouseover" ); ``` ### heightStyle**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"content"`控制Tab（選項卡）部件和每個panel（面板）的高度。可能的值： * `"auto"`: 所有的panel（面板）將會被設置為最高的panel（面板）的高度。 * `"fill"`: 基于 tabs 的父元素的高度，擴展到可用的高度。 * `"content"`: 每個panel（面板）的高度取決于它的內容。 **Code examples:** 初始化帶有指定 `heightStyle`選項的 Tab（選項卡）： ``` $( ".selector" ).tabs({ heightStyle: "fill" }); ``` 在初始化后，獲取或設置`heightStyle` 選項： ``` // getter var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" ); // setter $( ".selector" ).tabs( "option", "heightStyle", "fill" ); ``` ### hide**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object) **Default:** `null`panel（面板）隱藏時的動畫效果。**支持多個類型：** * **Boolean**: 當設置為`false`，將不使用動畫效果，該panel（面板）會立即被隱藏。如果設置為`true`，該panel（面板）將會以默認的持續時間和默認的效果淡出。 * **Number**: 該panel（面板）將以指定的時間和默認的效果淡出。 * **String**: 該panel（面板）將使用指定的效果被隱藏。該值可以是一個jQuery內置的動畫方法的名稱，如`"slideUp"`，或一個 [jQuery UI 效果](/category/effects/)的名稱，如`"fold"`。在這兩種情況下，將使用默認持續時間和默認的動畫效果。 * **Object**: 如果該值是一個對象，那么 `effect`, `delay`, `duration`, 和`easing`可能要提供。 ?如果 `effect` 屬性包含一個jQuery方法的名稱，那么該方法將被使用; 否則它被假定為是一個jQuery UI的效果的名稱。當使用jQuery UI 支持額外設置的效果，你可以在對象中包含那些設置并且它們將被傳遞到的效果。如果`duration`持續時間或`easing`屬性被省略，那么默認值將被使用。如果`effect`被省略，那么`"fadeOut"` 將被使用。如果`delay`被省略，那么將不使用延遲。 **Code examples:** 初始化帶有指定 `hide`選項的 Tab（選項卡）： ``` $( ".selector" ).tabs({ hide: { effect: "explode", duration: 1000 } }); ``` 在初始化后，獲取或設置`hide` 選項： ``` // getter var hide = $( ".selector" ).tabs( "option", "hide" ); // setter $( ".selector" ).tabs( "option", "hide", { effect: "explode", duration: 1000 } ); ``` ### show**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object) **Default:** `null`panel（面板）顯示時的動畫效果。**支持多個類型：** * **Boolean**: 當設置為`false`，將不使用動畫效果，該panel（面板）會立即被隱藏。如果設置為`true`，該panel（面板）將會以默認的持續時間和默認的效果淡出。 * **Number**: 該panel（面板）將以指定的時間和默認的效果淡出。 * **String**: 該panel（面板）將使用指定的效果被隱藏。該值可以是一個jQuery內置的動畫方法的名稱，如`"slideUp"`，或一個 [jQuery UI 效果](/category/effects/)的名稱，如`"fold"`。在這兩種情況下，將使用默認持續時間和默認的動畫效果。 * **Object**: 如果該值是一個對象，那么 `effect`, `delay`, `duration`, 和`easing`可能要提供。 ?如果 `effect` 屬性包含一個jQuery方法的名稱，那么該方法將被使用; 否則它被假定為是一個jQuery UI的效果的名稱。當使用jQuery UI 支持額外設置的效果，你可以在對象中包含那些設置并且它們將被傳遞到的效果。如果`duration`持續時間或`easing`屬性被省略，那么默認值將被使用。如果`effect`被省略，那么`"fadeOut"` 將被使用。如果`delay`被省略，那么將不使用延遲。 **Code examples:** 初始化帶有指定 `show`選項的 Tab（選項卡）： ``` $( ".selector" ).tabs({ show: { effect: "blind", duration: 800 } }); ``` 在初始化后，獲取或設置`show` 選項： ``` // getter var show = $( ".selector" ).tabs( "option", "show" ); // setter $( ".selector" ).tabs( "option", "show", { effect: "blind", duration: 800 } ); ``` ## Methods ### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 完全移除 Tab（選項卡）功能. 這將使元素返回到之前的初始化狀態。 * 該方法不接受任何參數。 **Code examples:** 調用 destroy 方法： ``` $( ".selector" ).tabs( "destroy" ); ``` ### disable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 禁用全部的 tabs（選項卡）。 * 該方法不接受任何參數。 **Code examples:** 調用該方法： ``` $( ".selector" ).tabs( "disable" ); ``` ### disable( index )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 禁用某個 tabs（選項卡）。選定的選項卡不能被禁用。 ?要一次禁用多個選項卡，設置[`disabled`](#option-disabled) 選項： `$( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] )`. * **index**Type: [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String)哪個 tabs（選項卡）被禁用。 **Code examples:** 調用該方法： ``` $( ".selector" ).tabs( "disable", 1 ); ``` ### enable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 啟用全部的 tabs（選項卡）。 * 該方法不接受任何參數。 **Code examples:** 調用該方法： ``` $( ".selector" ).tabs( "enable" ); ``` ### enable( index )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 啟用某個 tabs（選項卡）。 ?要一次要啟多個選項卡，可以重置disabled屬性，如： `$( "#example" ).tabs( "option", "disabled", [] );`. * **index**Type: [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String)Which tab to enable. **Code examples:** 調用該方法： ``` $( ".selector" ).tabs( "enable", 1 ); ``` ### load( index )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 加載遠程選項卡的面板內容。 * **index**Type: [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String)哪個tabs需要加載 **Code examples:** 調用 load 方法： ``` $( ".selector" ).tabs( "load", 1 ); ``` ### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object) 獲取當前與指定的 `optionName` 關聯的值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要獲取值的選項的名稱。 **Code examples:** 調用該方法： ``` var isDisabled = $( ".selector" ).tabs( "option", "disabled" ); ``` ### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject) 獲取一個包含鍵/值對的對象，鍵/值對表示當前 tabs 選項哈希。 * 該方法不接受任何參數。 **Code examples:** 調用該方法： ``` var options = $( ".selector" ).tabs( "option" ); ``` ### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 設置與指定的 `optionName` 關聯的 tabs 選項的值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要設置的選項的名稱。 * **value**Type: [Object](http://api.jquery.com/Types/#Object)要為選項設置的值。 **Code examples:** 調用該方法： ``` $( ".selector" ).tabs( "option", "disabled", true ); ``` ### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 為 tabs（選項卡）設置一個或多個選項。 * **options**Type: [Object](http://api.jquery.com/Types/#Object)要設置的 option-value 對。 **Code examples:** 調用該方法： ``` $( ".selector" ).tabs( "option", { disabled: true } ); ``` ### refresh()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/)) 處理任何在 DOM 中直接添加或移除的標題和面板，并重新計算 tabs（選項卡）的高度。結果取決于內容和 [`heightStyle`](#option-heightStyle) 選項。 * 該方法不接受任何參數。 **Code examples:** 調用 refresh 方法： ``` $( ".selector" ).tabs( "refresh" ); ``` ### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) 返回一個包含 tabs（選項卡）的 `jQuery` 對象。 * 該方法不接受任何參數。 **Code examples:** 調用 widget 方法： ``` var widget = $( ".selector" ).tabs( "widget" ); ``` ## Events ### activate( event, ui )Type: `tabsactivate` 面板被激活后觸發（在動畫完成之后）。如果 tabs（選項卡）之前是關閉的，則 `ui.oldTab` 和 `ui.oldPanel` 將是空的 jQuery 對象。如果 tabs（選項卡）正在折疊，則 `ui.newTab` 和 `ui.newPanel` 將是空的 jQuery 對象。 **注意：** 由于 `activate` 事件只有在面板激活時才能觸發，當創建 tabs（選項卡）部件時，最初的面板不會觸發該事件。如果您需要一個用于部件創建的鉤，請使用 [`create`](#event-create) 事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **newTab**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被激活的選項卡。 * **oldTab**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被取消激活的選項卡。 * **newPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被激活的面板。 * **oldPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被取消激活的面板。 **Code examples:** 初始化帶有指定 activate 回調的 Tab（選項卡面板）： ``` $( ".selector" ).tabs({ activate: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 tabsactivate 事件： ``` $( ".selector" ).on( "tabsactivate", function( event, ui ) {} ); ``` ### beforeActivate( event, ui )Type: `tabsbeforeactivate` tabs（選項卡）被激活前直接觸發。可以取消以防止tabs（選項卡）被激活。如果 tabs（選項卡）當前是關閉的，則 `ui.oldTab` 和 `ui.oldPanel` 將是空的 jQuery 對象。如果 accordion 正在折疊，則 `ui.newTab` 和 `ui.newPanel` 將是空的 jQuery 對象。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **newTab**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被激活的選項卡。 * **oldTab**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被取消激活的選項卡。 * **newPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被激活的面板。 * **oldPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛被取消激活的面板。 **Code examples:** 初始化帶有指定 beforeActivate 回調的 Tab（選項卡面板）： ``` $( ".selector" ).tabs({ beforeActivate: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 tabsbeforeactivate 事件： ``` $( ".selector" ).on( "tabsbeforeactivate", function( event, ui ) {} ); ``` ### beforeLoad( event, ui )Type: `tabsbeforeload` 在一個遠程選項卡被加載之前，[`beforeActivate`](#event-beforeActivate)事件之后，觸發該事件。可以取消，以防止 tabs（選項卡）面板加載內容;雖然面板仍然會被激活。該事件被觸發Ajax請求發送之前，這樣可以使用`ui.jqXHR` 和 `ui.ajaxSettings`修改。 _注意：雖然`ui.ajaxSettings`被提供，并且可以被修改，其中的一些設置已經通過jQuery處理。例如，[prefilters](//api.jquery.com/jQuery.ajaxPrefilter/)已經被應用，`data`已被處理，還有`type`已經確定。，因為`beforeSend`作為[`jQuery.ajax()`](//api.jquery.com/jQuery.ajax/)的回調，`beforeLoad` 事件同時是發生的，因此具有相同的限制。_ * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **tab**Type: [jQuery](http://api.jquery.com/Types/#jQuery)正在加載的選項卡。 * **panel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)將Ajax響應填充的面板。 * **jqXHR**Type: [jqXHR](http://api.jquery.com/Types/#jqXHR)被請求內容的 `jqXHR` 對象。 * **ajaxSettings**Type: [Object](http://api.jquery.com/Types/#Object)用于由[`jQuery.ajax`](//api.jquery.com/jQuery.ajax/)請求內容的設置。 **Code examples:** 初始化帶有指定 beforeLoad 回調的 Tab（選項卡面板）： ``` $( ".selector" ).tabs({ beforeLoad: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 tabsbeforeload 事件： ``` $( ".selector" ).on( "tabsbeforeload", function( event, ui ) {} ); ``` ### create( event, ui )Type: `tabscreate` 當創建 tabs（選項卡) 時觸發。如果 tabs（選項卡) 是關閉的，`ui.tab` 和 `ui.panel` 將是空的 jQuery 對象。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **tab**Type: [jQuery](http://api.jquery.com/Types/#jQuery)激活的選項卡 * **panel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)激活的面板。 **Code examples:** 初始化帶有指定 create 回調的 Tab（選項卡面板）： ``` $( ".selector" ).tabs({ create: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 tabscreate 事件： ``` $( ".selector" ).on( "tabscreate", function( event, ui ) {} ); ``` ### load( event, ui )Type: `tabsload` 遠程選項卡加載后觸發該事件。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **tab**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛加載的選項卡。 * **panel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)剛剛填充的Ajax響應的面板。 **Code examples:** 初始化帶有指定 load 回調的 Tab（選項卡面板）： ``` $( ".selector" ).tabs({ load: function( event, ui ) {} }); ``` 綁定一個事件監聽器到 tabsload 事件： ``` $( ".selector" ).on( "tabsload", function( event, ui ) {} ); ``` ## Example: #### 一個簡單的 jQuery UI 選項卡（Tabs）。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>tabs demo</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>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$( "#tabs" ).tabs(); </code></pre> </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> ```