Bootstrap Learn the tab page of JS plugin

A Simple tab page

Code:

[JavaScript]View Plaincopy

2. <H1 class="page-header" >4.3 tab
4. <ul class="Nav nav-tabs" >
6. <li class="active" ><a href="#" >Home</a></li>
8. <li><a href="#" >Profile</a></li>
10. <li><a href="#" >Message</a></li>
12. </ul>

Preview below:

To the above pre-predefined some href tag id, add a drop-down menu

[JavaScript]View Plaincopy

2. <ul class="Nav nav-tabs" >
4. <li><a href="#home" >Home</a></li>
6. <li><a href="#profile" >Profile</a></li>
8. <li><a href="#messages" >Messages</a></li>
10. <li><a href="#settings" >Settings</a></li>
12. <li class="dropdown" >
14. <a href="#" data-toggle="dropdown" class="Dropdown-toggle" >test<b class="Caret" ></b></a>
16. <ul class="Dropdown-menu" >
18. <li ><a href="#AAA" > @tag </a></li>
20. <li ><a href="#BBB" > @mag </a></li>
22. </ul>
24. </li>
26. </ul>

Adds an attribute to the a tag in the tab data-toggle= "tab"

Then add a div to the container below and give the style class with Tab-content.

The container defines the Div, and then adds the id attribute on the DIV, corresponds to the tag ID of the href above, and adds the Tab-pane style class, one of which is the following, of course, which also adds an active style class to the default activation

<div class= "Tab-pane active" id= "Home" >

Finally, each tab can now be clicked, and the menu of the drop-down menu can be clicked, which corresponds to the label content page we defined for tab-content.

As you can see above, we can implement the tag switching and content display through the Data property.

Expanded tabbed navigation

This plugin adds a tabbed content area to the tabbed navigation component.

Usage

Start switchable tabs via JavaScript (each tab is activated separately):

$ ( ' #myTab a '). Click (< span class= "keyword" >function  (e) { E.preventdefault () $ (this). Tab ( ' show ')})     

Remove all data-toggle of the A tag and call JS

There are several ways to activate tabs individually:

$(' #myTab a[href= "#profile"]). Tab (‘Show‘)Select tab by name$ (‘#myTab A:First ' ). tab ( '  Show ' ) //Select first tab$ ( #myTab a:last). tab ( ' show ' //select Last tab$ ( '  #myTab Li:eq ( 2) A ' show ' )  Select Third tab (0-indexed)             

Simply add the page element data-toggle="tab" or data-toggle="pill" You can activate the tab or capsule navigation without having to write any JavaScript code. You ul .nav .nav-tabs can give it a Bootstrap tab style for Add and Classe, and add nav and nav-pills class to give it a capsule label page.

You can use jquery to perform the first load

<script>  $ (function () {    $ (' #myTab a:first '). tab (' Show ')  }) </script>

$ (' a[data-toggle= ' tab "]). On (' Shown.bs.tab ', function (e) {  e.target//This parameter enables you to get the tab information for activation   E.relatedtarget The information of the tab before activating})

[JavaScript]View Plaincopy < param name= "allowfullscreen" value= "false" >< param name= "wmode" value= "Transparent" >

1. <script type="Text/javascript" >
2. $ (' a[data-toggle= ' tab "] '). On (' shown.bs.tab ', function (e) {
3. //e.target//Activated tab
4. //e.relatedtarget//Previous tab
5. Alert ("target:" +e.target);
6. Alert ("Related:" +e.relatedtarget);
7. })
8. </script>

Fade in effect

For each.tab-paneAdd to.fadeLets you have a fade-in effect on a tab. The content area corresponding to the first tab must also be added.inCauses the initial content to have a fade-in effect at the same time.

<Divclass="Tab-content" ><Divclass="Tab-pane Fade in Active"Id="Home" ...</div> <div class= "Tab-pane fade" id=  "Profile", .... </div> <div class= "Tab-pane fade" id=  "messages" ... </div> <div class= "Tab-pane fade" id=  "Settings" ... </div></DIV>   

Bootstrap Learn the tab page of JS plugin