I want to change the active bootstrap tab on the click of another button.
I have tried add id's to the tabs li and write custom jquery code.
$('#emailNotify').click(function () {
$('#notify').addClass('active').attr('aria-expanded','true');
$('#myacc').removeClass('active').attr('aria-expanded','false');
});
This code works fine on first click but it doesn't change back when I tried to click My Account tab again.
Markup:
<ul class="content-list museo_sans500">
<li><a href="javascript:void(0)">Change Password</a></li>
<li><a id="emailNotify" data-toggle="tab">Change Email Notifications</a></li>
<li><a href="javascript:void(0)">Change Profile Picture</a></li>
</ul>
You can change the active tab on the click event button with that:
$('#changetabbutton').click(function(e){
e.preventDefault();
$('#mytabs a[href="#second"]').tab('show');
})
Here's a JSFiddle with an example:
http://jsfiddle.net/4ns0mdcf/
You should use twitter-boostrap way to change between tabs:
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
or
$('#notify').tab('show'); // show notification tab
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With