# Tabs Widget
# 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>
$( "#tabs" ).tabs();
</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>
```
- 介紹
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .focus()
- .position()
- Methods
- .disableSelection()
- .enableSelection()
- .removeUniqueId()
- .scrollParent()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架（CSS Framework）
- Icons
- Stacking Elements
- UI Core
- Utilities
- Widget Factory
- Widget Plugin Bridge
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget
- upscayl使用教程