使用每个导航选项卡的向导时内容不会刷新

Question

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

代码如下和 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>

Answer 1

记住，不要讨厌玩家...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>