Bootstrap Tabs

In this tutorial you will learn how to create dynamic tabs to toggle between the content using the Bootstrap tabs plugin.

Creating Tabs with Bootstrap

Tab based navigations provides an easy and powerful mechanism to handle huge amount of content within a small area through separating content into different panes where each pane is viewable one at a time. The user can quickly access the content through switching between the panes without leaving the page. The following example will show you how to create the basic tabs using the Bootstrap tab component.

示例

Try this code »

```
<ul class="nav nav-tabs">
```

    <li class="active"><a href="#">Home</a></li>

```
    <li><a href="#">Profile</a></li>
```
```
    <li><a href="#">Messages</a></li>
```
```
</ul>
```

— 上面示例的输出将如下所示：

Creating Dynamic Tabs via Data Attributes

You can activate a tab component without writing any JavaScript — simply specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content. The following example will show you how to create a basic tabbable tabs via data attributes in Bootstrap.

示例

Try this code »

```
<ul class="nav nav-tabs">
```

    <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>

    <li><a data-toggle="tab" href="#sectionB">Section B</a></li>

```
    <li class="dropdown">
```

        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>

```
        <ul class="dropdown-menu">
```

            <li><a data-toggle="tab" href="#dropdown1">Dropdown 1</a></li>

            <li><a data-toggle="tab" href="#dropdown2">Dropdown 2</a></li>

```
        </ul>
```
```
    </li>
```
```
</ul>
```
```
<div class="tab-content">
```

    <div id="sectionA" class="tab-pane fade in active">

```
        <p>Section A content…</p>
```
```
    </div>
```

    <div id="sectionB" class="tab-pane fade">

```
        <p>Section B content…</p>
```
```
    </div>
```

    <div id="dropdown1" class="tab-pane fade">

```
        <p>Dropdown 1 content…</p>
```
```
    </div>
```

    <div id="dropdown2" class="tab-pane fade">

```
        <p>Dropdown 2 content…</p>
```
```
    </div>
```
```
</div>
```

Creating Dynamic Tabs via JavaScript

You may also enable tabs via JavaScript. Each tab needs to be activated individually.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $("#myTab a").click(function(e){
```
```
        e.preventDefault();
```
```
        $(this).tab('show');
```
```
    });
```
```
});
```
```
</script>
```

You can activate individual tabs in several ways:

示例

Try this code »

$('#myTab a[href="#profile"]').tab('show'); // show tab targeted by the selector

$("#myTab a:first").tab('show'); // show first tab

$("#myTab a:last").tab('show'); // show last tab

$("#myTab li:eq(2) a").tab('show'); // show third tab (0-indexed, like an array)

Methods

This is the standard bootstrap's tab method:

$().tab('show')

Activates a tab element and the related content container. Tab should have either a data-target or an href for targeting a container node in the DOM.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $("#myTab li:eq(1) a").tab('show');
```
```
})
```
```
</script>
```

Events

These are the standard Bootstrap events to enhance the tab functionality.

事件	说明
show.bs.tab	This event fires on tab show, but before the new tab has been shown. You can use the `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab	This event fires on tab show after a tab has been shown. You can use the `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab	This event fires when the current active tab is to be hidden and thus a new tab is to be shown. You can use the `event.target` and `event.relatedTarget` to target the current active tab and the new tab which is going to be active very soon, respectively.
hidden.bs.tab	This event fires after the previous active tab is hidden and a new tab is shown. You can use the `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

The following example displays the names of active tab and previous tab to the user when transition of a tab has been fully completed.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $('a[data-toggle="tab"]').on('shown', function(e){

```
        e.target // active tab
```
```
        e.relatedTarget // previous tab
```
```
    })
```
```
});
```
```
</script>
```

Bootstrap Tabs

Creating Tabs with Bootstrap

示例

Creating Dynamic Tabs via Data Attributes

示例

Creating Dynamic Tabs via JavaScript

示例

示例

Methods

$().tab('show')

示例

Events

示例

关于我们

联系方式

互动工具