我尝试在每个导航标签中使用向导，但是当我切换标签时，向导中当前步骤的内容将丢失。
代码遵循和JSFiddle here
<ul class="nav nav-tabs" id="idcnavtabs1">
<li><a href="#home1" data-toggle="tab">Home</a></li>
<li><a href="#train1" data-toggle="tab">Train</a></li>
<li><a href="#recognise1" data-toggle="tab">Recognise</a></li>
<li><a href="#manage1" data-toggle="tab">Manage</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home1">
<div class="fuelux">
<div id="homewizard" class="wizard">
<ul class="steps">
<li data-target="#home1step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content" id="homestepcontent">
<div class="step-pane active" id="home1step1">This is step 1</div>
</div>
</div>
</div>
<div class="tab-pane" id="train1">
<div class="fuelux">
<div id="trainwizard" class="wizard">
<ul class="steps">
<li data-target="#train1step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#train1step2"><span class="badge badge-info">1</span>Step 2<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content" id="trainstepcontent">
<div class="step-pane active" id="train1step1">This is step 1</div>
<div class="step-pane" id="train1step2">This is step 2</div>
</div>
</div>
</div>
<div class="tab-pane" id="recognise1">
<div class="fuelux">
<div id="recognisewizard" class="wizard">
<ul class="steps">
<li data-target="#recognise1step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#recognise1step2"><span class="badge badge-info">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#recognise1step3"><span class="badge badge-info">3</span>Step 3<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content" id="recognisestepcontent">
<div class="step-pane active" id="recognise1step1">This is step 1</div>
<div class="step-pane" id="recognise1step2">This is step 2</div>
<div class="step-pane" id="recognise1step3">This is step 3</div>
</div>
</div>
</div>
<div class="tab-pane" id="manage1">
<div class="fuelux">
<div id="managewizard" class="wizard">
<ul class="steps">
<li data-target="#manage1step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#manage1step2"><span class="badge badge-info">2</span>Step 2<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content" id="managestepcontent">
<div class="step-pane active" id="manage1step1">This is step 1</div>
<div class="step-pane" id="manage1step2">This is step 2</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
记住，不要讨厌玩家...... http://jsfiddle.net/adam_j_bradley/J4Tp9/11/ FuelEx错误参考https://github.com/ExactTarget/fuelux/issues/419 亚当
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">`enter code here`
<head>
<title></title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></scrip`enter code here`t>
<script type="text/javascript" src="Scripts/loader.min.js"></script>
<link rel="stylesheet" type="text/css" href="Content/fuelux.css">
<link rel="stylesheet" type="text/css" href="Content/fuelux-responsive.css">
<link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Content/bootstrap-theme.min.css">
<script>
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//Tab
$tabReference = $(e.target)
//Restore the Step in the Wizard
$wizardref = $tabReference.attr("href").substring(1) + "-wizard"
$wizard = $('[id^="' + $wizardref + '"]').wizard()
$_savestep = $wizard.wizard('selectedItem')
savedstep = $wizard.wizard('selectedItem').step
desiredstep = savedstep
if (savedstep == 1) {
$wizard.wizard('next');
$wizard.wizard('previous');
}
else {
$wizard.wizard('previous');
$wizard.wizard('next');
}
});
});
</script>
</head>
<body>
<ul class="nav nav-tabs" id="idcnavtabs1">
<li><a href="#home1" data-toggle="tab">Home</a></li>
<li><a href="#train1" data-toggle="tab">Train</a></li>
<li><a href="#recognise1" data-toggle="tab">Recognise</a></li>
<li><a href="#manage1" data-toggle="tab">Manage</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home1">
<div class="fuelux">
<div id="home1-wizard" class="wizard">
<ul class="steps">
<li data-target="#home1step1" class="active"><span class="badge badge-info">1</span>Introduction<span class="chevron"></span></li>
<li data-target="#home1step2"><span class="badge badge-info">2</span>Tour<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content" id="homestepcontent">
<div class="step-pane active" id="home1step1">This is step 1</div>
<div class="step-pane" id="home1step2">This is step 2</div>
</div>
</div>
</div>
<div class="tab-pane" id="train1">
<div class="fuelux">
<div id="train1-wizard" class="wizard">
<ul class="steps">
<li data-target="#train1step1" class="active"><span class="badge badge-info">1</span>Introduction<span class="chevron"></span></li>
<li data-target="#train1step2"><span class="badge badge-info">2</span>Capture and Train<span class="chevron"></span></li>
<li data-target="#train1step3"><span class="badge badge-info">3</span>Finished!<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content" id="trainstepcontent">
<div class="step-pane active" id="train1step1">This is step 1</div>
<div class="step-pane" id="train1step2">
<script>startwebcam();</script>
</div>
<div class="step-pane" id="train1step3">
<script>pausewebcam();</script>
You're done!
</div>
</div>
</div>
</div>
<div class="tab-pane" id="recognise1">
<div class="fuelux">
<div id="recognise1-wizard" class="wizard">
<ul class="steps">
<li data-target="#recognise1step1" class="active"><span class="badge badge-info">1</span>Information<span class="chevron"></span></li>
<li data-target="#recognise1step2"><span class="badge badge-info">2</span>Capture and Detect<span class="chevron"></span></li>
<li data-target="#recognise1step3"><span class="badge badge-info">3</span>Reset Password<span class="chevron"></span></li>
<li data-target="#recognise1step3"><span class="badge badge-info">4</span>Finished!<span class="chevron"></span></li>
</ul>
<div class="actions">
<button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content" id="recognisestepcontent">
<div class="step-pane active" id="recognise1step1">Information</div>
<div class="step-pane" id="recognise1step2">This is step 2
<script>startwebcam();</script></div>
<div class="step-pane" id="recognise1step3">This is step 3</div>
<div class="step-pane" id="recognise1step3">Finbished!</div>
</div>
</div>
</div>
<div class="tab-pane" id="manage1">
<ul class="nav nav-tabs" id="managetabs1">
<li><a href="#manage1-show" data-toggle="tab">Information</a></li>
<li><a href="#manage1-images" data-toggle="tab">Managed Images</a></li>
<li><a href="#manage1-about" data-toggle="tab">About</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="manage1-show">Information</div>
<div class="tab-pane" id="manage1-images">Managed Images</div>
<div class="tab-pane" id="manage1-about">About</div>
</div>
</div>
</div>
</body>
</html>