<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>
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>
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>
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>
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>
Html, JAVA,DOTNET,Javascript, PHP, and JQuery Scripts and its issues with solutions
Showing posts with label data-toggle. Show all posts
Showing posts with label data-toggle. Show all posts
Thursday, 14 August 2014
Bootstrap Tab to set active & show its content in onload or onclick
Subscribe to:
Comments (Atom)
Feet/Inches to Meters Converter & Lbs to Kgs Converter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Feet/Inches ⇄...
-
<?php $to = "somebody@example.com, somebodyelse@example.com"; $subject = "HTML email"; $message = " <h...
-
document.onkeydown = myKeyDownHandler; function myKeyDownHandler(event){ alert(event.keyCode) }
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Feet/Inches ⇄...