Bootstrap tabs (Tab) widget

Tab (Tab) in Bootstrap navigation elements introduced in the chapter. By combining a number of data attributes, you can easily create a tab interface. With this plugin, you can put content in tabs or capsule tabs and even drop down menu tab.

If you want to refer to the individual plug-in features, you need to referencetab.js.Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.

usage

You can enable tabs in two ways:

• Through data attributes: You need to add data-toggle = "tab"ordata-toggle = "pill"to anchor text links.

  Nav nav-tabsand add class to theul,and will be applied Bootstrap label style , and addnavnav-pills toulclass, and will be applied Bootstrap capsule style .

  <Ul class = "nav nav-tabs">
  	<Li> <a href="#identifier" data-toggle="tab"> Home </a> </ li>
  	...
  </ Ul>
  

• By JavaScript: You can use the tabs to enable Javscript, as follows:

  $ ( '# MyTab a'). Click (function (e) {
    e.preventDefault ()
    $ (This) .tab ( 'show')
  })
  

  The following example demonstrates different ways to activate the various tabs:

  // Select the name of the tab by $ ( '# myTab a [href = "# profile"]'). Tab ( 'show')
  
  // Select the first tab $ ( '# myTab a: first') tab ( 'show').
  
  // Select the last tab $. ( '# MyTab a: last') tab ( 'show')
  
  // Select the third tab (zero-indexed)
  $ ( '# MyTab li: eq (2) a') tab ( 'show').
  

Fade effect

If you need to set tabs fade effect, add.fade behind each .tab-pane.The first tab must be added.in class to fade in the original content, as shown in the following examples:

<Div class = "tab-content">
	<Div class = "tab-pane fade in active" id = "home"> ... </ div>
	<Div class = "tab-pane fade" id = "svn"> ... </ div>
	<Div class = "tab-pane fade" id = "ios"> ... </ div>
	<Div class = "tab-pane fade" id = "java"> ... </ div>
</ Div>

Examples

The following example demonstrates the use of property data tabs (Tab) and plug-fade effects:

The results are as follows:

method

<Ul class = "nav nav-tabs" id = "myTab">
	<Li class = "active"> <a href="#identifier" data-toggle="tab"> Home </a> </ li>
	.....
</ Ul>
<Div class = "tab-content">
	<Div class = "tab-pane active" id = "home"> ... </ div>
	.....
</ Div>
<Script>
	$ (Function () {
		$. ( '# MyTab a: last') tab ( 'show')
	})
</ Script>

Examples

The following example demonstrates the tab (Tab) plug-in methods.tab usage.In the present example, the second tab is activeiOS:

The results are as follows:

event

The following table lists the tabs (Tab) plug-in to be used in the event. These events can be used when the hook function.

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

Examples

The following example demonstrates the use of tabs (Tab) plug-in event. In the present example, it will display the current and the previous visited tabs:

The results are as follows: