jQuery的。 Bootstrap向导不进行下一步

Question

我正在使用引导向导，但是当您单击下一步时，它就不会前进。 我正在尝试使其一路走到尽头，并在到达终点时启用前一个。

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

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

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

我重新排列了您的代码，以便您可以循环使用（ 在这里更新了小提琴 ）。

相反，如果您只想在设置上循环，则可以考虑一个新事件：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>