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