<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 Tabs. Show all posts
Showing posts with label Tabs. Show all posts
Thursday, 14 August 2014
Bootstrap Tab to set active & show its content in onload or onclick
Subscribe to:
Posts (Atom)