Precisa de guias de bootstrap, mas com conteúdo dinâmico? Use este JS para buscar o conteúdo antes de mostrar a guia. Funciona para links no conteúdo também.
Javascript
//the reason for the odd-looking selector is to listen for the click event
// on links that don't even exist yet - i.e. are loaded from the server.
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
if (typeof url !== "undefined") {
var pane = $(this), href = this.hash;
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
} else {
$(this).tab('show');
}
});
Use uma classe .tablink em seus links no conteúdo para criar um link entre as guias. Veja o comentário em JS.
HTML
<div id="tabs">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active"><a href="#tab_basic">Basic</a></li>
<li><a href="#tab_images" data-url="?action=images">Images</a></li>
<li><a href="#tab_videos" data-url="?action=videos">Videos</a></li>
</ul>
<div class="tab-content">
<div id="tab_basic" class="tab-pane active"></div>
<div id="tab_images" class="tab-pane active"></div>
<div id="tab_videos" class="tab-pane active"></div>
</div>
</div>
Adaptado de: http://www.bootply.com/63891
Respostas relacionadas:
Alterar o ponto de interrupção do Bootstrap NavBar