我正在使用的表单向导有问题。
在我使用 JSF 标签或更具体地说，bootsfaces 之前，似乎一切都很好。
这是我的向导 HTML 代码和 JQuery 代码：
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="" data-original-title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="" data-original-title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="" data-original-title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="" data-original-title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<p:growl id="growl" class="growlBack" autoUpdate="true" sticky="true"></p:growl>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Basic Information</h3>
<hr/>
<div class="row">
<div class="col-md-6">
<label>Username</label>
<b:inputText type="text" class="form-control" id="userNameInput" placeholder="Username" required="true"/>
</div>
<div class="col-md-6">
<label>Title</label>
<b:selectOneMenu id="wizTitleList" required="true">
<f:selectItem itemLabel="- Select Title -" itemValue="0" />
<f:selectItems value="#{PopulateFields.titleCodes}" />
</b:selectOneMenu>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>First Name</label>
<b:inputText type="text" class="form-control" id="firstNameInput" placeholder="First Name" required="true"/>
</div>
<div class="col-md-6">
<label>Last Name</label>
<b:inputText type="text" class="form-control" id="lastNameInput" placeholder="Last Name" required="true"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Previous Last Name</label>
<b:inputText type="text" class="form-control" id="previousLastNameInput" placeholder="Previous Last Name" required="true"/>
</div>
<div class="col-md-6">
<label>Birth Date</label>
<b:inputText type="date" class="form-control" id="birthDateInput" placeholder="Birth Date" required="true"/>
</div>
<div class="col-md-6">
<label>Gender</label>
<b:selectOneMenu id="wizGenderList" required="true">
<f:selectItem itemLabel="- Select Gender -" itemValue="0" />
<f:selectItems value="#{PopulateFields.genders}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Type</label>
<b:selectOneMenu id="wizIDTypesList" required="true">
<f:selectItem itemLabel="- Select ID Type -" itemValue="0" />
<f:selectItems value="#{PopulateFields.idTypes}" />
</b:selectOneMenu>
</div>
<div class="col-md-6">
<label>ID Number</label>
<b:inputText type="text" class="form-control" id="idNumberInput" placeholder="ID " required="true"/>
</div>
</div>
<hr/>
<ul class="list-inline pull-right">
<li><b:button class="btn btn-primary next-step" value="Save and continue"></b:button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
这是我的 JQuery：
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
仅当我删除任何 bootsfaces 标签时，下一个和上一个按钮才有效。
我读过 JSF 组件添加了引用时需要使用的 ID，但我不确定这是否是问题所在，如果是这样，任何帮助将不胜感激。