Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Set (Open) Particular Bootstrap Tab on Page Load or Button / Link Click Example

Oct 11, 2015
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.

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


Demo for jQuery Set (Open) Particular Bootstrap Tab on Page Load or Button / Link Click Example




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 RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.