<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:
Posts (Atom)