我一直在寻找一个具有选项卡和验证功能的 jQuery 插件。我已经找到并且我正在尝试使用jquery-steps，但我似乎无法让它工作。我正在使用 jQuery 2.1（包含在 Scripts.jsp 中）。这是我的代码：
jsp：
<link rel="stylesheet" href="/eServices/css/jquery.steps.css"
type="text/css" />
<jsp:include page="/pages/includes/Scripts.jsp" />
<script type="text/javascript"
src="<s:text name="cp.globalContextPath"/>js/jquery.steps.js"></script>
<s:div id="wrapper">
<s:div id="maincontent">
<s:form name="tabs_form" id="tabs_form" cssClass="tabcontrol">
<h3>Intake</h3>
<fieldset id="intake" class="step">
...a few fields
</fieldset>
<h3>Details</h3>
<fieldset id="details" class="step">
...a few more fields
</fieldset>
<h3>Comments</h3>
<fieldset id="comments" class="step">
...a few more fields
</fieldset>
</s:form>
</s:div>
</s:div>
jQuery：
$(function() {
var form = $("#tabs_form");
form()
.validate(
{
rules : {
"reportedByName" : {
required : true
},
"reportedByPhone" : {
required : true
}
},
messages : {
"reportedByName" : {
required : "The Reported By Name is required."
},
"reportedByPhone" : {
required : "The Reported By Phone Number is required."
}
},
errorContainer : $('#errorContainer'),
errorLabelContainer : $('#errorContainer ul'),
wrapper : 'li'
});
form.steps({
headerTag : "h3",
bodyTag : "fieldset",
transitionEffect : "slideLeft",
onStepChanging : function(event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled, :hidden";
return form.valid();
},
onFinishing : function(event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished : function(event, currentIndex) {
alert('Submitted!');
}
});
});
当我运行应用程序时，我看不到任何选项卡。我看到一长页由标题和字段集标签分隔。那么，我错过了什么？是否需要其他 .js 文件？
谢谢！