Como criar botão para trocar de aba(pill)? Já tentei de algumas maneiras, porém em nada tive sucesso. Em um dos casos, consegui, mas troca apenas para a 2ªaba, depois, ele fica como se estivesse sem ação.
$(document).ready(function() {
$("#proximaAba").click(function() {
var tab = $(this).closest('.tab-pane');
$('#' + tab[0].id + ', .nav-pills li').removeClass('active');
$('.nav-pills li a[href="#' + tab.next()[0].id + '"]').parent().addClass('active');
tab.next().addClass('active');
});
});
<ul class="nav nav-pills" role="tablist">
<li role='presentation' class='active'><a href='#representante' aria-controls='representante' role='tab' data-toggle='pill'>Representante</a></li>
<li role='presentation'><a href='#preposto' aria-controls='preposto' role='tab' data-toggle='pill'>Preposto</a></li>
<li role='presentation'><a href='#outrasInformacoes' aria-controls='outrasInformacoes' role='tab' data-toggle='pill'>Outras Informações</a></li>
</ul>
<div class="tab-content">
<div role='tabpanel' class='tab-pane fade in active' id='representante'>
<div class="form-group col-md-6">
<label for="nome_empresa" class="required">Nome da Empresa</label>
<input type="text" class="form-control" name="nome_empresa" id="nome_empresa" required>
</div>
<div class="form-group col-md-6">
<button type="button" class="btn btn-default btn-lg" id="proximaAba">Próximo</button>
</div>
</div>
<div role='tabpanel' class='tab-pane fade in' id='preposto'>
<div class="form-group col-md-6">
<label for="nome_preposto" class="required">Nome - Preposto</label>
<input type="text" class="form-control" name="nome_preposto" id="nome_preposto" required>
</div>
<div class="form-group col-md-6">
<button type="button" class="btn btn-default btn-lg" id="proximaAba">Próximo</button>
</div>
</div>
<div role='tabpanel' class='tab-pane fade in' id='outrasInformacoes'>
<div class="form-group col-md-6">
<label for="id_vara_trabalho" class="required">Identificação Vara do Trabalho</label>
<input type="number" class="form-control" name="id_vara_trabalho" id="id_vara_trabalho" required placeholder="XXª Vara do Trabalho">
</div>
<div class="modal-footer col-md-12">
<button type="submit" class="btn btn-primary">Gerar Carta</button>
</div>
</div>
</div>