Tabs with JavaScript in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 4834 red flag
Rating: 3 out of 5  
 1 vote(s)

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Recommendation
Read Alerts in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
we have already seen Tabs in Tabs and Pills of Bootstrap. Lets see using them with Bootstrap's JavaScript.

Objective

The main objective of this article is to learn creating Tabs with JavaScript in BootStrap.

Using Bootstrap code

Lets see creating simple tabs using Bootstrap first,
<div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Training</a></li>
        <li><a href="#">Placement</a></li>
    </ul>
</div>
This will create a Tab like below,

Tabs with Data Attributes:
We can also create tabs with data attributes that works like menu's. Please refer the below code for clear view
<div>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
        <li><a data-toggle="tab" href="#Training">Training</a></li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Placements <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a data-toggle="tab" href="#dotnet">DotNet</a></li>
                <li><a data-toggle="tab" href="#android">Android</a></li>
                <li><a data-toggle="tab" href="#java">Java</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div id="Home" class="tab-pane fade in active">
            <p>This is the Home page...</p>
        </div>
        <div id="Training" class="tab-pane fade">
            <p>Please select your option regarding on Training...</p>
        </div>
        <div id="dotnet" class="tab-pane fade">
            <p>Welcome to DotNet Placements Section...</p>
        </div>
        <div id="android" class="tab-pane fade">
            <p>Welcome to Android Placements Section...</p>
        </div>
        <div id="java" class="tab-pane fade">
            <p>Welcome to Java Placements Section...</p>
        </div>
    </div>
</div>
In the above code, we have used the data attribute data-toggle to switch the Tabs. Run the code in your browser to see the following result

Tabs with JavaScript:
We can also switch the tabs with out using data attributes. For that we have to write a little JavaScript something like below,
<script type="text/javascript">
$(document).ready(function () {
    $("#tabMenu a").click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});
</script>
And we are removing data-toggle from the above HTML code as below,
<div>
    <ul class="nav nav-tabs" id="tabMenu">
        <li class="active"><a href="#Home">Home</a></li>
        <li><a href="#Training">Training</a></li>
        <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Placements <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#dotnet">DotNet</a></li>
                <li><a href="#android">Android</a></li>
                <li><a href="#java">Java</a></li>
            </ul>
        </li>
    </ul>
    <div class="tab-content">
        <div id="Home" class="tab-pane fade in active">
            <p>This is the Home page...</p>
        </div>
        <div id="Training" class="tab-pane fade">
            <p>Please select your option regarding on Training...</p>
        </div>
        <div id="dotnet" class="tab-pane fade">
            <p>Welcome to DotNet Placements Section...</p>
        </div>
        <div id="android" class="tab-pane fade">
            <p>Welcome to Android Placements Section...</p>
        </div>
        <div id="java" class="tab-pane fade">
            <p>Welcome to Java Placements Section...</p>
        </div>
    </div>
</div>
Run this combination in your browser to perform switching Tabs without Data Attributes because of JavaScript


Showing Tab targeted by Selector:
In order to show our tab manually on start or reload, we have to add the following script to the above code
<script type="text/javascript">
$(document).ready(function () {
    $('#tabMenu a[href="#java"]').tab('show'); // showing the tab targeted by the selector
});
</script>
After adding this code, you will get 'java' section by default like below

Note: You have to Include both Scripts to make it work. 

Showing First tab by Default:
In order to show the First tab on page reload, Add the below script to the main source
<script type="text/javascript">
$(document).ready(function () {
    $("#tabMenu a:first").tab('show'); // It show the first tab on Reload
});
</script>
Now run the code and you will see the first tab in active as below,

Showing Last tab by Default:
If we need to show the last tab on default, Change the Script like below,
<script type="text/javascript">
$(document).ready(function () {
    $("#tabMenu a:last").tab('show'); // It show the Last tab on Reload
});
</script>
Run this code in your browser to see the Last Tab by default 

Showing Tabs based on Index:
We can also show the Default Tab by using Index like in the below script,
<script type="text/javascript">
$(document).ready(function () {
    $("#tabMenu li:eq(1) a").tab('show'); // It shows second tab (0-indexed, like an array) on Reload
});
</script>
Now the above script will shows you the second tab by default in your browser as below,
 

Conclusion

In this article, we have looked into Tabs with JavaScript in Bootstrap. Hope you understand. If you have any doubts on this topic, please ask below.

Thanks for reading.

Regards,
Krishna.
Recommendation
Read Modals in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)