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.
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
 |
|
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
|
|||
2 comments :
how to link page on click the tab
In this way , is there a method to get the tab panel with the image ad change it on click event ?
Like it the tab is - img Text , on click the image should change
Note: Only a member of this blog may post a comment.