How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
Applying a selector from the .nav-tabs seems to be working
HTML is
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Script is
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
http://jsfiddle.net/pThn6/80/
HTML:
<a href="PageName.php#tabID">link to other page tab</a>
Javascript:
window.onload = function(){
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
//Change hash for page-reload
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').on('shown', function (e) {
window.location.hash = e.target.hash;
});
}
You may access through tab Id as well, But that id is unique for same page. Here is an example for same
$('#product_detail').tab('show');
In above example #product_details
is nav
tab
id