通过单击切换引导程序选项卡

Question

I want to next tab only by button click.

This is my file aspirante.php that contains tab panel:

<div class="bs-example bs-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#aspirante" id="aspirante-tab" role="tab" data-toggle="tab" aria-controls="aspirante" aria-expanded="true">Aspirante</a></li>
    <li role="presentation"><a href="#domicilio" role="tab" id="domicilio-tab" data-toggle="tab" aria-controls="domicilio">Domicilios</a></li>
    <li role="presentation"><a href="#academica" role="tab" id="academica-tab" data-toggle="tab" aria-controls="academica">Inform. Acad&eacute;mica</a></li>
    <li role="presentation"><a href="#adicional" role="tab" id="adicional-tab" data-toggle="tab" aria-controls="adicional">Inform. Adicional</a></li>
    <li role="presentation"><a href="#cerrar" role="tab" id="cerrar-tab" data-toggle="tab" aria-controls="cerrar">Finalizar</a></li>
</ul>
<br>
<div id="myTabContent" class="tab-content" >
    include_once('aspiranteForm.php');
    include_once('aspiranteDomicilioForm.php');
    include_once('aspiranteInformacionAcademicaForm.php');
    include_once('aspiranteAdicionalForm.php');
    include_once('aspiranteTramiteCerrarForm.php');
</div>

<script>
  $('.nav li a').click(function(e) {
     e.preventDefault();
     return false;
  });
</script>

Example aspiranteForm:

<div role="tabpanel" class="tab-pane fade in active" id="aspirante" aria-labelledBy="aspirante-tab">
  <form  id="aspiranteForm" name="aspiranteForm" method="post" enctype="multipart/form-data" action="aspirante.php" >
    <div class="row"> 
       <div class="form-group col-md-12">
          <button  id="submitAspitante" type="submit" class="btn btn-primary">Save</button>
          <button  id="submitAspitante2" type="submit" class="btn btn-primary" onclick="$('li').removeClass('active');$('#domicilio-li').addClass('active');$('.nav-tabs > .active').next('li').find('a').trigger('click');">Save & Continue</button>
    </div>
  </div>  
 </form>
</div>

I want for default that all tabs are "no active", only the current tab is active. When I clicked button submit (id="submitAspirante2") send data for post and next tab. Actually when I clicked no next tab.

Thank you.

Answer 1

First of all you dont need that script.

<div class="bs-example bs-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#aspirante-tab"  aria-controls="aspirante-tab" role="tab" data-toggle="tab" aria-expanded="true">Aspirante</a></li>
<li role="presentation"><a href="#domicilios-tab" aria-controls="domicilios-tab" role="tab" data-toggle="tab" aria-expanded="true" >Domicilios</a></li>
<li role="presentation"><a href="#academica-tab" aria-controls="aspirante-tab" role="tab" data-toggle="tab" aria-expanded="true" >Inform. Acad&eacute;mica</a></li>
<li role="presentation"><a href="#adicional-tab "aria-controls="adicional-tab" role="tab" data-toggle="tab" aria-expanded="true">Inform. Adicional</a></li>
<li role="presentation"><a href="#cerrar-tab" aria-controls="cerrar-tab" role="tab" data-toggle="tab" aria-expanded="true">Finalizar</a></li>
  </ul><br>
<div id="myTabContent" class="tab-content" >
include('aspiranteForm.php');
include('aspiranteDomicilioForm.php');
include('aspiranteInformacionAcademicaForm.php');
include('aspiranteAdicionalForm.php');
include('aspiranteTramiteCerrarForm.php');
</div>

Then your first active Forms should be like this

<div  class="tab-pane fade in active"  id="aspirante-tab">
<form  id="aspiranteForm" name="aspiranteForm" method="post" enctype="multipart/form-data" action="aspirante.php" >
<div class="row"> 
   <div class="form-group col-md-12">
      <button  id="submitAspitante" type="submit" class="btn btn-primary">Save</button>
      <button  id="submitAspitante2" type="submit" class="btn btn-primary" onclick="$('li').removeClass('active');$('#domicilio-li').addClass('active');$('.nav-tabs > .active').next('li').find('a').trigger('click');">Save & Continue</button>
</div>
</div>  

Then the other inactive forms should be like this

<div  class="tab-pane"  id="domicilios-tab">
<form  id="aspiranteForm" name="aspiranteForm" method="post" enctype="multipart/form-data" action="aspirante.php" >
<div class="row"> 
   <div class="form-group col-md-12">
   domicilios
      <button  id="submitAspitante" type="submit" class="btn btn-primary">Save</button>
      <button  id="submitAspitante2" type="submit" class="btn btn-primary" onclick="$('li').removeClass('active');$('#domicilio-li').addClass('active');$('.nav-tabs > .active').next('li').find('a').trigger('click');">Save & Continue</button>
</div>
</div>  

More refference in here