Menu
I spent an unrealistic amount of time trying to fire a function when the tab changes of the bootstrap 3 tab/navbar and literally all suggestions google spat out were wrong/did not work.
How to go about this?
Meta-edit: see comment
572
$(document). ready(function(){ activaTab('aaa'); }); function activaTab(tab){ $('. tab-pane a[href="#' + tab + '"]'). tab('show'); };
Answer: Use the HTML5 localStorage Object In Bootstrap, if you refresh the page the tab is reset to default setting. However, you can use the HTML5 localStorage object to save some parameter for the current tab locally in the browser and get it back to make the last active tab selected on page reload.
var selectedTab = $("#TabList"). tabs(). data("selected. tabs");
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(e.target).attr("href") // activated tab alert(target); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade active in" id="home"> home tab! </div> <div class="tab-pane fade" id="profile"> profile tab! </div> </div>$(function () { $('#myTab a:last').tab('show'); }); $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(e.target).attr("href"); if ((target == '#messages')) { alert('ok'); } else { alert('not ok'); } }); the problem is that attr('href') is never empty.
Or to compare the #id = "#some value" and then call the ajax.
28
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
