English 中文(简体)
Bootstrap Tutorial

Bootstrap with CSS

Bootstrap Layout Components

Bootstrap Plugins

Bootstrap Demos

Bootstrap Useful Resources

Selected Reading

Bootstrap - Tab Plugin
  • 时间：2024-11-03

Bootstrap - Tab Plugin

Previous Page Next Page  

Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, you can easily create a tabbed interface. With this plug-in you can transition through panes of local content in tabs or pills, even via drop down menus.

If you want to include this plugin functionapty inspanidually, then you will need tab.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

You can enable tabs in the following two ways −

    Via data attributes − you need to add data-toggle = "tab" or data-toggle = "pill" to the anchors.

    Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab stypng, while adding the nav and nav-pills classes will apply pill stypng.

<ul class = "nav nav-tabs">
   <p><a href = "#identifier" data-toggle = "tab">Home</a></p>
   ...
</ul>

    Via JavaScript − you can enable tabs using Javscript as below −

$( #myTab a ).cpck(function (e) {
   e.preventDefault()
   $(this).tab( show )
})

    Here’s an example of different ways to activate inspanidual tabs −

// Select tab by name
$( #myTab a[href = "#profile"] ).tab( show )
 
// Select first tab
$( #myTab a:first ).tab( show ) 

// Select last tab
$( #myTab a:last ).tab( show ) 

// Select third tab (0-indexed)
$( #myTab p:eq(2) a ).tab( show )

Fade Effect

To get a fade effect for tabs, add .fade to each .tab-pane. The first tab pane must also have .in to properly fade in initial content −

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

Example

An example of tab plugin using data attributes and fade effect is as shown in the following example −

<ul id = "myTab" class = "nav nav-tabs">
   <p class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </p>
   
   <p><a href = "#ios" data-toggle = "tab">iOS</a></p>
	
   <p class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java 
         <b class = "caret"></b>
      </a>
      
      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <p><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></p>
         <p><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></p>
      </ul>
   </p>
</ul>

<span id = "myTabContent" class = "tab-content">

   <span class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </span>
   
   <span class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple s mobile version of the OS X 
         operating system used on Apple computers.</p>
   </span>
   
   <span class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         apppcation for load and performance testing.</p>
   </span>
   
   <span class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level apppcations to be 
         deployed on J2EE comppant Apppcation Server such as JBOSS, Web Logic etc.</p>
   </span>
   
</span>