in Bootstrap

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