How to change tab(Pill) through navigation button?

Question

How to create button to change tab(Pill)? I have tried in some ways, but I have not succeeded in anything. In one case, I got it, but only switch to the 2nd tab, then it’s like he’s out of action.

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

Answer 1

There were two buttons with the same id (proximaAba).

I added classes to simplify (the use of ID is not necessary for this operation).

Also, I removed the class active of tab-pane current.

$(this).parents(".tab-pane").removeClass('active');

Run the code below and see the example working.

$(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');
    
    $(this).parents(".tab-pane").removeClass('active');
    
  });
  
});

<!-- BOOTSTRAP Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<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 proximaAba" id="proximaAba1"  >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 proximaAba"  id="proximaAba2">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>