javascript - jQuery。 Bootstrap 向导不会进入下一步

Question

我正在使用 Bootstrap 向导，但是当您单击下一步时，它不会继续。 我试图让它一路走下去，并在到达终点后启用前一个。

由于某种原因它无法正常工作

我的FIDDLE

$(document).ready(function() {

    var navListItems = $('ul.setup-panel li a'),
        allWells = $('.setup-content');

    allWells.hide();

    navListItems.click(function(e)
    {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this).closest('li');

        if (!$item.hasClass('disabled')) {
            navListItems.closest('li').removeClass('active');
            $item.addClass('active');
            allWells.hide();
            $target.show();
        }
    });

    $('ul.setup-panel li.active a').trigger('click');


    $('#activate-step-2').on('click', function(e) {
        $('ul.setup-panel li:eq(1)').removeClass('disabled');
        $('ul.setup-panel li a[href="#step-2"]').trigger('click');
        $(this).remove();
    })    
     $('#activate-step-3').on('click', function(e) {
        $('ul.setup-panel li:eq(1)').removeClass('disabled');
        $('ul.setup-panel li a[href="#step-3"]').trigger('click');
        $(this).remove();
    })  

});

Answer 1

首先:你错过了 html 中的下一个按钮，例如:

<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>

如果您需要在容器和设置上循环，您可以在两个容器之一中实现此行为，并使另一个容器遵循第一个容器。

我重新排列了您的代码，以便您可以以循环方式循环( updated fiddle here )。

如果您只想在设置上循环，您可以考虑一个新事件:clickwiz 而不是 click。

代码片段:

$(document).ready(function() {

    var navListItems = $('ul.setup-panel li a'),
            allWells = $('.setup-content');


    allWells.hide().eq(0).show();
    navListItems.on('click', function(e)
    {
        e.preventDefault();
        var $target = $($(this).attr('href')),
                $item = $(this).closest('li');

        if (!$item.hasClass('disabled')) {
            navListItems.closest('li').removeClass('active').addClass('disabled');
            allWells.hide();
            if ($item.next('li').length == 0) {
            //
            // for cyclic: go back to first ele
            //
                navListItems.eq(0).closest('li').removeClass('disabled').addClass('active');
                allWells.eq(0).show();
            } else {
                $item.next('li').removeClass('disabled').addClass('active');
                $target.next('div').show();
            }
        }
    });
    
    $('[id^="activate-step-"]').on('click', function(e) {
        var href = '#' + $(this).closest('.setup-content').attr('id');
        $('ul.setup-panel li a[href="' + href + '"]').trigger('click');
    })
});

body{ 
    margin-top:20px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
    <div class="row form-group">
        <div class="col-xs-12">
            <ul class="nav nav-pills nav-justified thumbnail setup-panel">
                <li class="active"><a href="#step-1">
                    <h4 class="list-group-item-heading">Step 1</h4>
                    <p class="list-group-item-text">First step description</p>
                </a></li>
                <li class="disabled"><a href="#step-2">
                    <h4 class="list-group-item-heading">Step 2</h4>
                    <p class="list-group-item-text">Second step description</p>
                </a></li>
                <li class="disabled"><a href="#step-3">
                    <h4 class="list-group-item-heading">Step 3</h4>
                    <p class="list-group-item-text">Third step description</p>
                </a></li>
                <li class="disabled"><a href="#step-4">
                    <h4 class="list-group-item-heading">Step 4</h4>
                    <p class="list-group-item-text">Fourth step description</p>
                </a></li>
            </ul>
        </div>
    </div>
    <div class="row setup-content" id="step-1">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1> STEP 1</h1>
                <button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button>
            </div>
        </div>
    </div>
    <div class="row setup-content" id="step-2">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1 class="text-center"> STEP 2</h1>
                <button id="activate-step-3" class="btn btn-primary btn-lg">Activate Step 3</button>
            </div>
        </div>
    </div>
    <div class="row setup-content" id="step-3">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1 class="text-center"> STEP 3</h1>
                <button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
            </div>
        </div>
    </div>
    <div class="row setup-content" id="step-4">
        <div class="col-xs-12">
            <div class="col-md-12 well text-center">
                <h1 class="text-center"> STEP 4</h1>
                <button id="activate-step-1" class="btn btn-primary btn-lg">Activate Step 1</button>
            </div>
        </div>
    </div>

</div>