A tua markup indica que estás a fazer uso do plugin Togglable tabs do Bootstrap.
O teu problema
Se analisares o teu código e verificares na documentação do Bootstrap para o plugin Togglable tabs, a forma como estás a ativar o mesmo é incorreta por dois motivos:
Quando usas:
<a href="#prest_contas" data-toggle="tab">Prestação de Contas</a>
Estás a ativar o plugin através do atributo data
, não precisas de usar JavaScript, mas na tua pergunta estás a usar ambos.
Na documentação:
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab"
or data-toggle="pill"
on an element.
Que traduzido:
Podes ativar a navegação tab ou pill sem escrever nenhum JavaScript simplesmente especificando dados-toggle="tab"
ou data-toggle="pílula"
num elemento.
Quando ativas via JavaScript:
Cada trigger tem que ser instanciado independentemente, algo que tu estás a tentar fazer mas de forma incorreta dado que estás a relacionar todos os separadores para o mesmo painel:
Teu código atual
/* Este teu código precisa de ser ajustado
*/
$(".pagination").find('a').each(function(){
$(this).click(function(e){
e.preventDefault();
$("a[href='#notas']").tab('show'); // ←-- A falhar aqui porque
}); // esta chamada ativa o
}); // separador via "nome"
// e é sempre ID #notas
Teu código retificado
Ver exemplo no JSFiddle
/* 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
});
});
O trigger sabe quem é o seu painel porque o mesmo está referenciado no atributo href
.
/* 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
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<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>
Considerações gerais
Markup do plugin
O mesmo tem uma markup especifica para que as coisas funcionem como esperado:
<!-- Separadores de navegação -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#idMeuPainel1" role="tab" data-toggle="tab">Formulário 1</a>
</li>
<li role="presentation">
<a href="#idMeuPainel2" role="tab" data-toggle="tab">Formulário 2</a>
</li>
</ul>
<!-- Paineis dos separadores -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="idMeuPainel1">
<!-- o teu formulário 1 aqui -->
</div>
<div role="tabpanel" class="tab-pane" id="idMeuPainel2">
<!-- o teu formulário 2 aqui -->
</div>
</div>
Como podes reparar pelo exemplo em cima, cada trigger diz respeito a um painel e a relação entre o trigger e o painel é realizada pelo ID do painel:
<a href="#idMeuPainel2" role="tab" data-toggle="tab">Formulário 2</a>
│└────┬─────┘
│ │
│ └────────────────────────────────┐ <!-- exatamente iguais -->
↓ │
<!-- # = indicador de ID --> │
┌─────┴────┐
<div role="tabpanel" class="tab-pane" id="idMeuPainel2"></div>
Nota: Cada trigger tem que apontar para um único painel e os IDs tem que ser unicos na página inteira.
Primeira Tab Ativa
A classe de CSS active
é a responsável por apresentar um separador aberto ao iniciar o plugin.
A mesma deverá estar presente tanto no parent do trigger como no elemento que serve de painel.
No exemplo nesta resposta, o parent do trigger é uma e o painel é uma <div/>
:
<li role="presentation" class="active"> <!-- ... --> </li>
<div role="tabpanel" class="tab-pane active" id="idMeuPainel1"> <!-- ... --> </div>
Nota: Apenas um parent de um trigger e apenas um painel podem estar com a classe active
ou surgem comportamentos não esperados como é o caso de ao carregar a página aparecerem múltiplos painéis visíveis.
Outros problemas de aparecerem dois painel
Muitas vezes também estão a aparecer dois painéis por falhas na markup ou por duplicação de id
:
Falha na markup
Se tiveres dois painéis mas o primeiro não estiver com as tags de fecho presentes ou na ordem correta, o HTML vai ser mal interpretado e quando esse painel fica visível, o que está a baixo fica também.
Duplicação de id
Se dois painéis estiverem com o mesmo id
, ao chamares esse id
vão aparecer os dois painéis.
#notas
", o que é um erro mas acredito não estar relacionado ao seu problema. Seu HTML é que deve estar incorreto, tem como postá-lo inteiro em algum lugar? (pastebin por exemplo, mas se puder usar algo como o StackSnippets ou jsFiddle para criar um exemplo mínimo, completo e verificável, tanto melhor!)