Jquery - Como alternar entre Tabs através de botões?

[Sow 0]

Boa tarde,

 

Estou começando a aprender JQuery, mas estou tendo algumas dificuldades.

 

 

Quero construir uma página que tenha 2 tabs, mas que o usuário não possa navegar entre elas apenas clicando na parte superior do menu e sim através de botões, no estilo "PRÓXIMA PARTE".

Estou usando o Framework do Bootstrap para isso.

<div class="bs-example bs-example-tabs">
      <ul id="myTab" class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#categoria" role="tab" data-toggle="tab">Categoria</a></li>
          <li class=""><a href="#obra" role="tab" data-toggle="tab">Obra</a></li>
      </ul>

<div id="myTabContent" class="tab-content">
<!--TAB 1 -->
  <div class="tab-pane fade active in" id="categoria">
      <p>conteudo da tab categoria</p>
      <button id="botao_proxima_tab" type="button">Próxima Tab</button>
  </div>
<!--TAB 2 -->
 <div class="tab-pane fade active in" id="obra">
      <p>conteudo da tab obra</p>
  </div>
 </div>

</div> 

Eu estava tentando fazer o Jquery para isso:

 $('#botao_proxima_tab').click(function() {
    $('#obra').show();
 });

Isso deve estar completamente errado, será que alguém pode me dar uma luz?

[celsomtrindade 2]

 

Bom, seguindo a sua lógica, talvez com isso funcione:

$('#botao_proxima_tab').click(function() {
    $('#obra').show();
    $('#categoria').hide();
});

$('#botao_anterior_tab').click(function() {
    $('#obra').hide();
    $('#categoria').show();
});

Insira mais um botão para o "Anterior", do mesmo modo que o "Próximo" e acho que vai funcionar.

Não sei se é o melhor modo, pois parece que você está fazendo a tab do 0.

 

Mas caso você queira pesquisar, existem alguns plugins que fazem isso. Lembro que já vi, só não lembro onde.

[Sow 0]

Hmm, pior que não funcionou, assim ele esconde o conteúdo da tab, mas não passa para a próxima. Estou procurando os plugins que você falou, mas não achei nada com botões.

Eu acho que vou tentar fazer uma paginação quem sabe, por que eu não quero que o usuário navegue livremente entre as tabs, mas sim só através de botões...

 

A ideia de usar as tabs era ´pra não ter que sair da mesma página... E o pior é que eu ainda não sei ajax, por isso estava tentando usar isso com Jquery

[Douglas Julião 34]

Cara tenta ver se isso funciona, tipo tenta chamar o id da próxima aba:

<div id="botao_proxima_tab"><a href="#obra" role="tab" data-toggle="tab">Obra</a></div>

Boa sorte :)