我有选项卡面板。我在选项卡面板的第一个选项卡中有一个表单。我想在第一个选项卡面板中填写表单中的所有内容，控件应该转到第二个选项卡。我不知道如何在jquery中完成。
这是选项卡结构：
<div class="wizard-inner">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">Customer
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> Person
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> Equipment
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4"> Address
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> Cart
</a>
</li>
</ul>
</div>
第一个选项卡中的表单：
<form name="customer" id="customer" method="post" action="#step2">
<div class="form-inline">
<div class="pad col-md-6">
<div class="form-group col-md-12">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="fname" placeholder="First Name" required>
</div>
<div class="form-group col-md-12">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="lname" placeholder="Last Name" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">Gender</label>
<select name="gender" id="gender" class="dropselectsec1" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">Skill level</label>
<select name="visa_status" id="g" class="r" required>
<option value="">Select Skill level</option>
<option value="df">cv</option>
<option value="df">xc</option>
<option value="df">df</option>
</select>
</div>
<div class="form-group col-md-12 inc">
</div>
</div>
<div class="pad col-md-6">
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">fg</label>
<input type="text" class="form-control" name="age" id="exampleInputName" placeholder="Age" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">fgf</label>
<input type="text" class="form-control" name="height" id="exampleInputName" placeholder="Height * (cm)" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">fgfg</label>
<input type="text" class="form-control" name="weight" id="exampleInputName" placeholder="Weight * (kg)" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">ffg</label>
<input type="text" class="form-control" name="shoesize" id="exampleInputName" placeholder="Shoe size *" required>
</div>
</div>
<input type="submit" name="save" class="btn btn-primary next-step" value="Continue"/>
</form>
在填写完表单中的所有细节后，我想把控制权交给第二个选项卡。如何在jquery中给出它？有人能帮我吗？
点击按钮调用下面的函数
function ValidData()
{
var $myForm = $('#customer');
if ($myForm[0].checkValidity()) {
//Activate next tab code goes here
}
return false;
}
在每个步骤中提交表单后，加载页面并在javascript中设置一个变量来指示当前步骤。然后使用它设置正确的选项卡禁用所有选项卡，然后激活正确的选项卡。
这样的东西：
<?php
// logic to determine current step...
$step = 'step1'; // or 'step2', 'step3', etc
?>
<script>
$(function() {
var current_step = <?php echo $step; ?>;
// reset all li elements under any div that has a "wizard-inner" class
$('div.wizard-inner li').removeClass('active').addClass('disabled');
// set the correct tab as active. you'd have to add an this id to the appropriate DOM element
$('#step1-tab').addClass('active');
})
</script>
<?php
// more php code
?>
由于您还没有发布所有代码，所以有点不清楚实际页面是如何组合在一起的，但这是解决方案的要点。您可能希望将id、名称、数据属性等添加到某些DOM元素中，以便使用javascript更容易识别和交互。