我有一个简单的html表单,嵌套了jQuery步骤。
主向导有5个步骤,第3步有一个包含3个步骤的子向导。
点击"下一步"主向导,步骤被移动,内容显示,但在第3步(带有子向导的那一步)之后,选项卡移动到4rth但是在达到4rth步骤时没有显示内容,如果我禁用显示子的jQuery脚本向导,主要的4rth步骤显示内容。
我尝试了各种论坛,现在也开始调试jQuery Steps库一段时间,但无法找到原因。
感谢任何帮助。
这是可执行的代码。
$("#frmMainWizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slide", // "fade",
stepsOrientation: "vertical"
//enableAllSteps: true,
//enablePagination: false,
});
var childForms = $(".frmWizardSteps");
$.each(childForms, function() {
console.log(this.id);
var currentSubStesId = '#' + this.id;
$(currentSubStesId).steps({
headerTag: "h4",
bodyTag: "div",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
//autoFocus: true,
//enableAllSteps: true,
//enablePagination: false
});
});
$('#btnPrev').click(function() {
$("#frmMainWizard").steps('previous');
});
$('#btnNext').click(function() {
$("#frmMainWizard").steps('next');
});

/* Wizard styles - override jquery steps */
.wizard.clearfix > .content.clearfix {
overflow: auto !important;
}
/*
.frmMainWizard
{
border-style: solid;
border-color: blue;
border-width: 5px;
overflow:auto !important;
}
*/
/*
.frmWizardSteps
{
border-style: solid;
border-color: red;
border-width: 5px;
overflow:auto !important;
}
*/
.frmWizardSteps.wizard,
.frmWizardSteps.tabcontrol {
width: 95% !important;
}
.frmWizardSteps.wizard > .steps a,
.frmWizardSteps.wizard > .steps a:hover,
.frmWizardSteps.wizard > .steps a:active {
padding: 0.5em 0.5em !important;
}
.frmWizardSteps .content {
/*position: relative !important;*/
min-height: 20em !important;
}
.frmWizardSteps > .actions > ul {
display: inline-block;
text-align: right;
}

<link href="https://godwin.azurewebsites.net/content/jquery.steps.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://godwin.azurewebsites.net/Scripts/jquery.steps.js"></script>
<div id="frmMainWizard">
<h3>Pre prerequisites</h3>
<section>
<input id="aak_0" name="aak_0" type="checkbox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_0" name="hm_0" rows="5" style="min-width: 350px; width:auto;">Help material for Pre prerequisites</textarea>
<br />
<input id="sc_0" name="sc_0" type="checkbox" value="true" />
<label>Completed this step</label>
<br />
</section>
<h3>Prerequisites</h3>
<section>
<input id="aak_1" name="aak_1" type="checkbox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_1" name="hm_1" rows="5" style="min-width: 350px; width:auto;">Help material for prerequisites</textarea>
<br />
<input id="sc_1" name="sc_1" type="checkbox" value="true" />
<label>Completed this step</label>
<br />
</section>
<h3>Actual work</h3>
<section>
<br />
<input id="aak_2" name="aak_2" type="checkbox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_2" name="hm_2" rows="5" style="min-width: 350px; width:auto;">Help material for Actual work</textarea>
<br />
<br />
<div class="frmWizardSteps" id="frmWizardStep_c7514cd1-bf01-4adb-ba2a-4cd546bfc0a1">
<h4>Pre work</h4>
<div>
<br />
<br />
<textarea class="form-control" cols="20" id="hm_2_0" name="hm_2_0" rows="5" style="min-width: 350px; width:auto;">Help for Pre work</textarea>
<br />
</div>
<h4>Current work</h4>
<div>
<textarea class="form-control" cols="20" id="hm_2_1" name="hm_2_1" rows="5" style="min-width: 350px; width:auto;">Help for Current work</textarea>
<br />
</div>
<h4>Post work</h4>
<div>
<textarea class="form-control" cols="20" id="hm_2_2" name="hm_2_2" rows="5" style="min-width: 350px; width:auto;">Help for Post work</textarea>
<br />
</div>
</div>
</section>
<h3>Post actions</h3>
<section>
<input id="aak_3" name="aak_3" type="checkbox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_3" name="hm_3" rows="5" style="min-width: 350px; width:auto;">Help material for Post actions</textarea>
<br />
<input id="sc_2_3" name="sc_2_3" type="checkbox" value="true" />
<label>Completed this step</label>
<br />
</section>
<h3>Post post actions</h3>
<section>
<input id="aak_4" name="aak_4" type="checkbox" value="true" />
<label>Agent Acknowledgement</label>
<textarea class="form-control" cols="20" id="hm_4" name="hm_4" rows="5" style="min-width: 350px; width:auto;">Help material for Post post actions</textarea>
<br />
<input id="sc_3" name="sc_3" type="checkbox" value="true" />
<label>Completed this step</label>
<br />
</section>
</div>
<div>
<button id="btnPrev">MainPrev</button>
<button id="btnNext">MainNext</button>
</div>
&#13;