3

Possuo um formulário para cadastro dividido em abas, onde as abas estão desabilitadas até o usuário clicar no botão para habilitar e ir para próxima. O problema é que da forma que está o usuário tem que habilitar o botão e em seguida clicar na próxima aba. Preciso que quando o usuário clicar no botão PRÓXIMO ele seja direcionado para a próxima aba automaticamente, e adicionar um botão para retornar para a aba anterior.

Meu código está assim atualmente: JSFiddle

HTML:

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

    <div id='content' class="tab-content">
      <div class="tab-pane active" id="home">
          Nome: <input/><br/>
          <button>Próximo</button>
      </div>
      <div class="tab-pane" id="profile">
          CPF: <input/><br/>
          <button>Próximo</button>
      </div>
      <div class="tab-pane" id="messages">

          <button>Salvar</button>
      </div>
    </div>    

JS:

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab")
    });
});

Eu preciso de algo parecido como isso: Exemplo

2 Respostas 2

7

A forma mais simples que vejo é acionar o evento click na aba. Basta adicionar um trigger("click") na linha que habilita a mesma:

$('button').click(function(){
    /*enable next tab*/
    $('.nav li.active').next('li').removeClass('disabled');
    $('.nav li.active').next('li').find('a').attr("data-toggle","tab").trigger("click");
});

Para dicionar um botão para voltar é bem simples. Você pode adicionar o botão diretamente no html. Recomendo que você comece a utilizar classes ou até ids para identificar seus botões.

Segue exemplo completo:

HTML

<ul class="nav nav-pills">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>

<div id='content' class="tab-content">
    <div class="tab-pane active" id="home">
        Nome: <input/><br/>
        <button class="next">Próximo</button>
    </div>
    <div class="tab-pane" id="profile">
        CPF: <input/><br/>
        <button class="prev">Anterior</button>
        <button class="next">Próximo</button>
    </div>
    <div class="tab-pane" id="messages">
        <button class="prev">Anterior</button>
        <button class="save">Salvar</button>
    </div>
</div>

JS

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");

    $('button.next').click(function(){
        /*enable next tab*/
        $('.nav li.active').next('li').removeClass('disabled');
        $('.nav li.active').next('li').find('a').attr("data-toggle","tab").trigger("click");
    });

    $('button.prev').click(function() {
        $('.nav li.active').prev('li').find('a').trigger("click");
    });
});
1
  • Isso resolveu a parte de avançar corretamente. Você teria uma sugestão de como adicionar o botão para retornar para a aba anterior?
    – Randrade
    24/02/2015 às 12:32
3

Com certeza a resposta do Oeslei é melhor, mas estou deixando aqui uma forma manual de se fazer isso:

jsFiddle

$(document).ready(function() {
    /*disable non active tabs*/
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");
    
    $('button.next').click(function(){
        $lia = $('.nav li.active');
        $li = $('.nav li.active').next('li');
        
        /*enable next tab*/
        $li.removeClass('disabled');
        $li.find('a').attr("data-toggle","tab");
        /*toggle tab*/
        $li.find('a').click();
        
        /*disable previous tab*/
        $lia.addClass('disabled');
        $lia.find('a').removeAttr("data-toggle");
    });
    $('button.previous').click(function(){
        $lia = $('.nav li.active');
        $li = $('.nav li.active').prev('li');
        
        /*enable next tab*/
        $li.removeClass('disabled');
        $li.find('a').attr("data-toggle","tab");
        /*toggle tab*/
        $li.find('a').click();
        
        /*disable previous tab*/
        $lia.addClass('disabled');
        $lia.find('a').removeAttr("data-toggle");
    });
});
1
  • Seu código me ajudou com a lógica, muito obrigado.
    – Randrade
    24/02/2015 às 13:13

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 .