Introduction:
Here I will explain how to use jQuery set default bootstrap tab on page load or jQuery set particular bootstrap nav tab on button or link click with example. To set particular or specific bootstrap tab menu on page load or button click we need to use property tab like “$('.nav-tabs a[href="#tab1"]').tab('show')”.
Description:
In previous articles I explained jQuery bootstrap multi select dropdownlist with checkboxes, jQuery show images in 360 degree view plugins, jQuery validate radiobuttonlist with example and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to set default bootstrap tab on page load or button click in jQuery with example.
In previous articles I explained jQuery bootstrap multi select dropdownlist with checkboxes, jQuery show images in 360 degree view plugins, jQuery validate radiobuttonlist with example and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to set default bootstrap tab on page load or button click in jQuery with example.
To set default bootstrap tab in jQuery
we need to write the code like as shown below
$('.nav-tabs a[href="#tab1"]').tab('show');
|
If
you want to check it in complete example you need to write the code like as
shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Set Default Tab
on Button Click Example</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.nav-tabs a[href="#tab1"]').tab('show');
$('#btnSet').click(function () {
var tab = "tab3";
$('.nav-tabs a[href="#' +
tab + '"]').tab('show');
})
})
</script>
</head>
<body>
<form id="form1"><br />
<input type="button"
id="btnSet"
value="Set Tab3" /><br /><br />
<ul class="nav
nav-tabs">
<li><a href="#tab1"
data-toggle="tab">Tab1</a></li>
<li><a href="#tab2"
data-toggle="tab">Tab2</a></li>
<li><a href="#tab3"
data-toggle="tab">Tab3</a></li>
</ul>
<div style="width:20%">
<div class="tab-content"
id="tabs">
<div class="tab-pane"
id="tab1">...Sample
Tab1...</div>
<div class="tab-pane"
id="tab2">...Sample
Tab2...</div>
<div class="tab-pane"
id="tab3">...Sample
Tab3...</div>
</div>
</div>
</form>
</body>
</html>
|
Live
Demo
Check following demo to set default bootstrab tab
selection on button click in jQuery
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.