Bootstrap :: Togglable tabs

Exemplo do tabbable tabs ativado via JavaScript

by Salustiano Silva

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="pagination">
    <ul id="tabs_sistem" class="nav nav-tabs">
        <li id="tab_prest_contas" class="active">
            <a href="#prest_contas">Prestação de Contas</a>
        </li>
        <li id="tab_notas">
            <a href="#notas">Notas Fiscais</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="prest_contas">
            <p>Painel para Prestação de Contas</p>
        </div>
        <div class="tab-pane" id="notas">
            <p>Painel para Notas Fiscais</p>
        </div>
    </div>
</div>

JavaScript

/* Dentro do contentor `pagination` localizar
 * os triggers de cada painel e associar os
 * mesmos ao seu separador
 */
$('.pagination .nav-tabs a').each(function() {
    
    $(this).click(function(e) {
        e.preventDefault();
        
        $(this).tab('show'); // apresentar o meu painel
    });
});