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