Default Pattern
 
Welcome visitor you can login or create an account.

Tabs

Togglable tabs

Client side of the template based on «Twitter Bootstrap». On this section you will find examples of how to use the basic styles of «Twitter Bootstrap» and other styles, with help of which you will be able to design and make almost any interested you website page. In this template, we have also added a number of styles and advanced features that make the «Precise» very flexible template that is suitable for all business tasks.

Example tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence. «Itembridge» offers a number of creative products such as: online stores templates, one page promo sites, graphic works and corporate style for the wide audience. The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates. Corporate style and graphic works always have the perfect design so you do not have to change a lot of settings to achieve the desired style.

«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence. «Itembridge» offers a number of creative products such as: online stores templates, one page promo sites, graphic works and corporate style for the wide audience. The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates. Corporate style and graphic works always have the perfect design so you do not have to change a lot of settings to achieve the desired style.

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})
                

You can activate individual tabs in several ways:

$('#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').tab('show'); // Select third tab (0-indexed)
                

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

<ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Methods

$().tab

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 class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

<script>
    $(function () {
      $('#myTab a:last').tab('show');
    })
</script>
                

Events

Event Description
show This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('a[data-toggle="tab"]').on('shown', function (e) {
    e.target // activated tab
    e.relatedTarget // previous tab
})