Problem with the bootstrap

Question

Guys with a problem here in my TCC, I am creating a web application, in the front end of my project I have a screen that contains a tab with two fields, when clicking on a form appears for the user to pre-ench and if click on the other form. My problem is, the two forms are coming up on both tabs. Does anyone have any tips???

<script>
 $(".pagination").find('a').each(function(){
  $(this).click(function(e){                
    e.preventDefault();
    $("a[href='#notas']").tab('show');
  });
});
</script>
<ul id="tabs_sistem" class="nav nav-tabs">
  <li id="tab_prest_contas" class="active">
    <a href="#prest_contas" data-toggle="tab">Prestação de Contas</a>
  </li>
  <li id="tab_notas">
    <a href="#notas" data-toggle="tab">Notas Fiscais</a>
  </li>
</ul> 

---

as you asked... ta ai code...I am using a javascript script to make tabs work and added an id in each form...

in this image ta the script that is using and the html of tabs... in the forms, I put inside a div in each with the ids that appear in the image...

Answer 1

^{Your Markup indicates that you are using the plugin Togglable tabs bootstrap.}

Your problem

If you scan your code and check the Bootstrap documentation for the plugin Togglable tabs, the way you are activating it is incorrect for two reasons:

1. When you use:

   <a href="#prest_contas" data-toggle="tab">Prestação de Contas</a>
   

   You’re activating the plugin through the attribute data, you don’t need to use Javascript, but in your question you are using both.

   In the documentation:

   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.

   That translated:

   You can activate the navigation tab or Pill without writing any Javascript simply specifying dados-toggle="tab" or data-toggle="pílula" in an element.

2. When active via Javascript:

   Each Trigger has to be instantiated independently, something 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

   View 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 is your panel because it is referenced in the attribute 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>
    
    

---

General considerations

Markup of plugin

The same has a Markup specifies things to 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 by the example above, each Trigger relates 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 has to point to a single panel and the Ids have to be unique on the full page.

First Active Tab

The class of CSS active is responsible for displaying an open tab when starting the plugin.

It should be present both in the Parent of Trigger as in the panel element.

In the example in this answer, the Parent of Trigger is one and the panel is one <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 panel can be with the class active or unexpected behaviors arise as is the case when loading the page appear multiple visible panels.

Other problems of appearing two panel

Often also appear two panels for failures in Markup or by duplication of id:

• Flaw in the Markup

  If you have two panels but the first one is not with the closing tags present or in the correct order, the HTML will be misinterpreted and when this panel is visible, the bottom one is also.

• Doubling of id

  If two panels are the same id, by calling this one id the two panels will appear.