Working with Nav Tabs in Bootstrap3

Bootstrap Nav Tabs
This quick block post is for those who want to know how bootstrap nav tabs work and how to associate them with respective data blocks.
HTML:

<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>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="home"> Sample Content for Home </div>
    <div class="tab-pane" id="profile"> Sample Content for Profile </div>
    <div class="tab-pane" id="messages"> Sample Content for Messages </div>
</div>

Script:

$(document).ready(function(){
        activaTab('home');
    });
    function activaTab(tab){
        $('.nav-tabs a[href="#' + tab + '"]').tab('show');
    };

References: http://getbootstrap.com/components/#nav

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s