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 Get Selected Bootstrap Tab or Active Tab on Click (Change) Example

Oct 19, 2015
Introduction

Here I will explain how to use
jQuery to get selected bootstrap tab on click or jQuery set or get bootstrap selected tab value on change event with example. By using data-toggle property we can get selected bootstrap tab value in jQuery on tab change.

Description:
  
In previous articles I explained jQuery set particular bootstrap tab selected on pageload,
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 get selected bootstrap tab on click or on change event in jQuery with example.

To get selected bootstrap tab value in jQuery we need to write the code like as shown below


<script type="text/javascript">
$(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href")
alert(target);
});
})
</script>

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 Bootstrap Tabs 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 () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href")
alert(target);
});
})
</script>
</head>
<body>
<form id="form1"><br />
<ul class="nav nav-tabs" style="width:30%; margin-left:30%;">
<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:30%;margin-left:30%">
<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 get selected bootstrab tab on click in jQuery


Output of jQuery Get Selected Bootstrap Tab or Active Tab on Click (Change) 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

Other Related Posts

© 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.