FADE EFFECT - BOOTSTRAP TUTORIAL. Simply Easy Learning by tutorialspoint.com. tutorialspoint.co

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:

</div>

EXAMPLE

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

Tutorial Point Home </a>

</li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">Java <b class="caret"></b>

</a>

<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

This website covers most of the latest technoligies and explains each of the technology with simple examples. You also have a <b>tryit</b> editor, wherein you can edit your code and try out different possibilities of the examples.</p>

</div>

<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>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure Java application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level applications to be deployed on J2EE compliant

Application Server such as JBOSS, Web Logic etc.

</p>

</div>

Methods

.$().tab: This method activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

...

</ul>

...

The following example shows use of tab plugin method .tab. Here in the example the second tab iOSis activated:

Tutorial Point Home</a>

</li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">Java <b class="caret"></b>

</a>

jmeter</a>

</li>

ejb</a>

<p>Tutorials Point is a place for beginners in all technical areas.

</div>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure Java application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level

Following table lists the events to work with tab plugin. This event may be used to hook into the function.

Event Description Example

show.bs.tab

This event fires on tab show, but before the new tab has been shown.

Use event.target andevent.relatedTarget to target the active tab and the previous active tab (if available) respectively.

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

e.target // activated tab e.relatedTarget // previous tab })

shown.bs.tab

This event fires on tab show after a tab has been shown.

Useevent.target andevent.relatedTarget to target the active tab and the previous active tab (if available) respectively.

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

e.target // activated tab e.relatedTarget // previous tab

})

EXAMPLE

The following example shows use of tab plugin events. Here in the example we will display the current and previous visited tabs:

<hr>

<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>

<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>

<hr>

Tutorial Point Home</a></li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">

Java <b class="caret"></b></a>

<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

</div>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure Java application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // Get the name of active tab

var activeTab = $(e.target).text();

// Get the name of previous tab

var previousTab = $(e.relatedTarget).text();

$(".active-tab span").html(activeTab);

$(".previous-tab span").html(previousTab);

});

</script>

In document BOOTSTRAP TUTORIAL. Simply Easy Learning by tutorialspoint.com. tutorialspoint.com (Page 151-156)