Question

我只想通过按钮点击下一个标签。

这是我的文件aspirante.php，其中包含选项卡面板：

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

示例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>

我希望默认情况下所有标签都是＆＃34;没有活动＆＃34;，只有当前标签处于活动状态。当我点击按钮提交（id =＆＃34; submitAspirante2＆＃34;）时，会发送帖子和下一个标签的数据。实际上当我点击没有下一个标签时。

谢谢。

Answer 1

首先，你不需要那个脚本。

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

然后你的第一个活跃表格应该是这样的

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

然后其他非活动形式应该是这样的

<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

单击切换引导选项卡

1 个答案: