Botão do Bootstrap 4 Tabs Wizard não funciona no Bootstrap 4.0.0-beta

25/09/2017

0

Eu usei o código do Bootstrap 4 Tabs Wizard do link https://www.codeply.com/go/dPkMlefHpl, mas o botão salvar não funciona no Bootstrap 4.0.0-beta (somente na versão 4.0.0-alfa.3). Na versão alpha.3, as etapas ao pressionar o botão funcionam corretamente, mas na nova versão o botão não responde. Já tentei fazer algumas modificações mas nada, e eu preciso implementar nesta versão por questões de compatibilidade. Quais mudanças eu preciso fazer no código?

O código está abaixo:

JAVASCRIPT:

$(document).ready(function () {
    //Initialize tooltips
    $('.nav-tabs > li a[title]').tooltip();

    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

        var $target = $(e.target);

        if ($target.parent().hasClass('disabled')) {
            return false;
        }
    });

    $(".next-step").click(function (e) {

        var $active = $('.nav-tabs li>a.active');
        $active.parent().next().removeClass('disabled');
        nextTab($active);

    });
    $(".prev-step").click(function (e) {

        var $active = $('.nav-tabs li>a.active');
        prevTab($active);

    });
});

function nextTab(elem) {
    $(elem).parent().next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
    $(elem).parent().prev().find('a[data-toggle="tab"]').click();
}


HTML:

<div class="container">
    <div class="row">
        <section>

            <ul class="nav nav-tabs" role="tablist">

                <li role="presentation" class="nav-item">
                    <a href="#step1" class="nav-link active" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                            1
                        </a>
                </li>

                <li role="presentation" class="nav-item">
                    <a href="#step2" class="nav-link disabled" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                            2
                        </a>
                </li>
                <li role="presentation" class="nav-item">
                    <a href="#step3" class="nav-link disable" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                            3
                        </a>
                </li>

                <li role="presentation" class="nav-item">
                    <a href="#complete" class="nav-link disable" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                            4
                        </a>
                </li>
            </ul>

            <form role="form">
                <div class="tab-content">
                    <div class="tab-pane active" role="tabpanel" id="step1">
                        <h3>Step 1</h3>
                        <p>This is step 1</p>
                        <ul class="list-inline pull-xs-right">
                            <li class="list-inline-item">
                                <button type="button" class="btn btn-primary next-step">Save and continue</button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step2">
                        <h3>Step 2</h3>
                        <p>This is step 2</p>
                        <ul class="pull-xs-right">
                            <li class="list-inline-item">
                                <button type="button" class="btn btn-default prev-step">Previous</button>
                            </li>
                            <li class="list-inline-item">
                                <button type="button" class="btn btn-primary next-step">Save and continue</button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step3">
                        <h3>Step 3</h3>
                        <p>This is step 3</p>
                        <ul class="list-inline pull-xs-right">
                            <li class="list-inline-item">
                                <button type="button" class="btn btn-default prev-step">Previous</button>
                            </li>
                            <li class="list-inline-item">
                                <button type="button" class="btn btn-default next-step">Skip</button>
                            </li>
                            <li class="list-inline-item">
                                <button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="complete">
                        <h3>Complete</h3>
                        <p>You have successfully completed all steps.</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </section>
    </div>
</div>
Fábio Adriano

Fábio Adriano

Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar