1

Galera to com um problema aqui no meu TCC, estou criando uma aplicação web, no front-end do meu projeto tenho uma tela que contem uma tab com dois campos, ao clicar em uma aparece um formulário para o usuário pre-encher e se clicar na outra outro formulário. O meu problema é que está aparecendo os dois formulários nas duas tabs. Alguém tem alguma dica???

<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> 

como pediram... ta ai o código...estou usando um script em javascript pra fazer as tabs funcionarem e adicionei um id em cada formulario... inserir a descrição da imagem aqui

nessa imagem ta o script que to usando e o html das tabs... nos formulários, coloquei dentro de uma div em cada com os ids que aparecem na imagem...

4
  • Não estou a perceber o seu problema se poder explicar melhor onde está o problema. Como fazes os show de um form e do outro?
    – Jorge B.
    7/11/2014 às 2:02
  • Tipo o meu problema é q em cada tab deveria mostrar 1 formulário diferente mas nas duas ta mostrando os dois... e eu não tenho a menor ideia de onde esta o erro estou usando esse tipo de código pela primeira vez... então estou bem perdido... 7/11/2014 às 2:05
  • Seu código está dizendo para "qualquer link que for clicado, abra a tab #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!)
    – mgibsonbr
    7/11/2014 às 3:40
  • @JesseSeffrin eu vejo ai um jQuery que só trata a tab notas e o jQuery para a outra tab?
    – Jorge B.
    7/11/2014 às 8:53

1 Resposta 1

9

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:

  1. 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.

  2. 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.

3
  • bah... valeu amigo... vou tentar... 7/11/2014 às 12:03
  • Deu Certo amigo... muito obrigado... tipo eu tenho que entregar meu tcc segunda-feira a parte escrita e meu orientador pediu essa tela pronta... e agora graças a vc eu consegui... muito obrigado mesmo... 7/11/2014 às 12:11
  • 3
    Parabéns pela resposta! +1
    – Leonardo
    7/11/2014 às 18:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .