jQuery.Bootstrap向导不去下一步

Question

我正在使用自举向导，但是当您单击下一步时，它不会前进。 我试图使它一直走，一旦它达到终结，就可以启用它。

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

我的小提琴

$(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而不是单击。

。

摘要：

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