# :tabbable Selector
Categories: [Selectors](http://www.css88.com/jquery-ui-api/category/selectors/ "View all posts in Selectors") | [UI Core](http://www.css88.com/jquery-ui-api/category/ui-core/ "View all posts in UI Core")
**Description:** 选择用户可通过 tab 键聚焦的元素。
* #### jQuery( ":tabbable" )
一些元素本身是可通过 tab 键聚焦的(tabbable),而另一些元素需要显式设置一个正的 tab 索引。以上两种情况,为了可通过 tab 键聚焦(tabbable),元素都必须是可见的。
下面类型的元素如果不带有负的 tab 索引且未被禁用,则是可通过 tab 键聚焦的(tabbable):`input`、`select`、`textarea`、`button` 和 `object`。锚如果带有 `href` 或正的 `tabindex` 属性,则是可通过 tab 键聚焦的(tabbable)。`area` 元素如果在一个已命名的 map 内,且带有 `href` 属性,且有一个可见的图像使用了该 map,则是可通过 tab 键聚焦的(tabbable)。所有其他完全基于 `tabindex` 属性和可见度的元素是可通过 tab 键聚焦的(tabbable)。
注释:带有负的 tab 索引的元素是 [`:focusable`](/focusable-selector/),不是 `:tabbable`。
## Example:
#### 选择可通过 tab 键聚焦的元素,且用一个红色边框突出显示。
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabbable demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
input {
border: 1px solid #000;
}
div {
padding: 5px;
}
</style>
<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><input value="no tabindex"></div>
<div><input tabindex="5" value="positive tabindex"></div>
<div><input tabindex="-1" value="negative tabindex"></div>
<script>
$( ":tabbable" ).css( "border-color", "red" );
</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
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget