Your markup indicates that you are using plugin Toggle tabs of Bootstrap.
Your problem
If you look at your code and check the Bootstrap documentation for the plugin Togglable tabs , the way you're activating it is incorrect for two reasons:
When you use:
<a href="#prest_contas" data-toggle="tab">Prestação de Contas</a>
You are activating the plugin with the data attribute, you do not need to use JavaScript, but in your question you are using both.
In the documentation:
You can activate a tab or pill without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.
What translated:
You can enable tab or pill navigation without writing any JavaScript simply by specifying dados-toggle="tab" or data-toggle="pílula" in an element.
When enabled via JavaScript:
Each trigger has to be instantiated independently, something that you are trying to do but incorrectly since you are relating all tabs to the same panel:
Your current code
/* 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
Your rectified code
See example in 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
});
});
The trigger knows who your panel is because it is referenced in the href attribute.
/* 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><scriptsrc="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>
General considerations
Markup of plugin
The same has a markup to make things work as expected:
<!-- 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>
As you can see from the example above, each trigger refers to a panel and the relationship between the trigger and the panel is performed by the panel ID:
<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>
Note: Each trigger must point to a single panel and the IDs must be unique on the entire page.
First Tab Active
The CSS class active is responsible for displaying an open tab when starting the plugin .
It should be present in both the parent of the trigger and the panel element.
In the example in this answer, the parent of the trigger is one and the panel is <div/> :
<li role="presentation" class="active"> <!-- ... --> </li>
<div role="tabpanel" class="tab-pane active" id="idMeuPainel1"> <!-- ... --> </div>
Note:
Only one parent of a trigger and only one dashboard can be with class active or unexpected behavior is the case when loading multiple page visible panels.
Other issues of appearing two panel
Often two panels are also encountered because of markup faults or duplication of id :
-
markup failure
If you have two panels but the first one does not have the closing tags present or in the correct order, the HTML will be misinterpreted and when that panel is visible, what is below is also.
-
Duplication of id
If two panels have the same id , calling this id will display both panels.
