我已经创建了无法正常工作的向导。它始终显示第一和第二向导步骤。但是我只需要一个向导，然后在单击Next时，第二个向导应该显示，第三个向导也应显示相同的方式。最后，我要实现previous和submit。
脚本
$(function ()
{
$(".wizard-step:first").fadeIn();
$("#back-step").hide().click(function ()
{
var $step = $(".wizard-step:visible");
if ($step.prev().hasClass("wizard-step")) {
$step.hide().prev().fadeIn();
if (!$step.prev().prev().hasClass("wizard-step")) {
$("#back-step").hide();
}
}
});
$("#next-step").click(function ()
{
var $step = $(".wizard-step:visible");
var validator = $("form").validate();
var anyError = false;
$step.find("input").each(function ()
{
if (!validator.element(this)) {
anyError = true;
}
});
if (anyError)
return false;
if ($step.next().hasClass("confirm")) {
$.post("/wizard/confirm", $("form").serialize(), function (r)
{
$(".wizard-step.confirm").html(r);
});
}
if ($step.next().hasClass("wizard-step")) {
$step.hide().next().fadeIn();
$("#back-step").show();
}
else {
$("form").submit();
}
});
});
查看
<div class="Wizard-step">
<div class="panel panel-default">
<h4>BASIC INFO</h4>
<div class="panel-body">
<div class="form-group has-success ">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
@Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
<span class="input-group-addon"><i class="glyphicon glyphicon-ok"></i></span>
</div>
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EmailId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.EmailId, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.EmailId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-calendar"></i>
</div>
@Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="CoursesStudiedYesNo" style="padding-left:6em;">
@Html.Label("Have you studied before?")
<br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "Yes")<span id="SpacebetweenRadioandText">Yes</span><br />
@Html.RadioButtonFor(m => m.StudiedYesNo, "No", new { @checked = "checked" })<span id="SpacebetweenRadioandText">No</span>
</div>
</div>
<div class="form-group ">
<div class="CoursesDropdown" style="padding-left:6em;">
@Html.LabelFor(model => model.CoursesStudied, htmlAttributes: new { @class = "control-label " })
<br />
@Html.DropDownListFor(m => m.CoursesStudied, Model.CoursesStudiedList, "Choose the course you have studied here", new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CoursesStudied, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step" style="display:none">
<div class="panel panel-default">
<h4>CONTACT DETAILS</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Phone", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Mobile", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.mobileNumber, new { htmlAttributes = new { @class = "form-control" } })
<i class="glyphicon glyphicon-ok"></i>
</div>
@Html.ValidationMessageFor(model => model.mobileNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.Label("Address", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control", placeholder = "Street" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Suburb, new { htmlAttributes = new { @class = "form-control", placeholder = "Sub" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control", placeholder = "City" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Region, new { htmlAttributes = new { @class = "form-control", placeholder = "Region" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
<div class="inner-addon right-addon">
@Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control", placeholder = "Country" } })<br />
<i class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step" style="display:none">
<div class="panel panel-default">
<h4>SELECT A COURSE</h4>
<div class="panel-body">
<div class="form-group">
@Html.Label("Course", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(m => m.CourseName, Model.CourseNameList, "Choose a course", new { @class = "form-control" })
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step" style="display:none">
<div class="panel panel-default">
<h4>SUMMARY</h4>
<div class="panel-body">
<div>
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.EmailId)
</dt>
<dd>
@Html.DisplayFor(model => model.EmailId)
</dd>
<dt>
@Html.DisplayNameFor(model => model.DOB)
</dt>
<dd>
@Html.DisplayFor(model => model.DOB)
</dd>
<dt>
@Html.DisplayName("Study History")
</dt>
<dd>
@Html.DisplayFor(model => model.CoursesStudied)
</dd>
<dt>
@Html.DisplayNameFor(model => model.PhoneNumber)
</dt>
<dd>
@Html.DisplayFor(model => model.PhoneNumber)
</dd>
<dt>
@Html.DisplayNameFor(model => model.mobileNumber)
</dt>
<dd>
@Html.DisplayFor(model => model.mobileNumber)
</dd>
<dt>
@Html.DisplayName("Address")
</dt>
<dd>
@Html.DisplayFor(model => model.Street)
</dd>
<dd>
@Html.DisplayFor(model => model.Suburb)
</dd>
<dd>
@Html.DisplayFor(model => model.City)
</dd>
<dd>
@Html.DisplayFor(model => model.Region)
</dd>
<dd>
@Html.DisplayFor(model => model.Country)
</dd>
<dt>
@Html.DisplayName("Selected Course")
</dt>
<dd>
@Html.DisplayFor(model => model.CourseName)
</dd>
</dl>
</div>
</div>
</div>
</div>