Twitter bootstrap 内容不'；在每个导航选项卡上使用向导时不刷新

我正在尝试在多个导航选项卡中的每个选项卡中使用向导，但当我切换选项卡时，向导中当前步骤的内容将丢失

代码遵循JSFiddle和JSFiddle

1步骤1

上
下一个
这是第一步

1步骤1
1步骤2

上
下一个
这是第一步
这是第二步

1步骤1
2步骤2
3步骤3

上
下一个
这是第一步
这是第二步
这是第三步

1步骤1
2步骤2

上
下一个
这是第一步
这是第二步

记住，不要恨玩家。。。 FuelEx错误参考 亚当

`在这里输入代码`
$（文档）.ready（函数（）{
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
//标签
$tabReference=$（e.target）
//恢复向导中的步骤
$wizardref=$tabReference.attr（“href”）.substring（1）+“-wizard”
$wizard=$（'[id^=“+$wizardref+'“]”）向导（）
$\u savestep=$wizard.wizard（'selectedItem'）
savedstep=$wizard.wizard（'selectedItem'）。步骤
desiredstep=savedstep
如果（savedstep==1）{
$wizard.wizard（'next'）；
$wizard.wizard（'previous'）；
}
否则{
$wizard.wizard（'previous'）；
$wizard.wizard（'next'）；
}                
});
});







1介绍
2小时

上
下一个
这是第一步
这是第二步

1介绍
2采集和培训
3完成

上
下一个
这是第一步
startwebcam（）；
pausewecam（）；
你完了！

1信息
2捕获并检测
3重置密码
4完成

上
下一个
问询处
这是第二步
startwebcam（）；
这是第三步
Finbished！





问询处
托管映像
关于

实际上，这只允许它重新渲染最初渲染的内容，我要做的是在选择向导步骤时动态渲染。这可能吗//亚当

<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>

    <!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>