switching bootstrap tab by click - php

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">Aspirante</li>
<li role="presentation">Domicilios</li>
<li role="presentation">Inform. Académica</li>
<li role="presentation">Inform. Adicional</li>
<li role="presentation">Finalizar</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">Aspirante</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émica</a></li>
<li role="presentation">Inform. Adicional</li>
<li role="presentation">Finalizar</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