html 基于引导选项卡的多步骤

Posted 2021-05-11

// navigate to steps
$('[data-js="navigate-to-step"]').on('click', function(){
    var step = $(this).data('step');
    $('a[href="#js-tabStep' + step + '"]').tab('show');
});

<ul class="nav nav-tabs hidden" role="tablist">
    <li role="presentation" class="active"><a href="#js-tabStep1" aria-controls="js-tabStep1" role="tab" data-toggle="tab">Step 1</a></li>
    <li role="presentation"><a href="#js-tabStep2" aria-controls="js-tabStep2" role="tab" data-toggle="tab">Step 2</a></li>
    <li role="presentation"><a href="#js-tabStep3" aria-controls="js-tabStep3" role="tab" data-toggle="tab">Step 3</a></li>
    <li role="presentation"><a href="#js-tabStep4" aria-controls="js-tabStep4" role="tab" data-toggle="tab">Step 4</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="js-tabStep1">
        Step 1
        <button type="button" data-js="navigate-to-step" data-step="2">Next</button>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="js-tabStep2">
        Step 2
        <button type="button" data-js="navigate-to-step" data-step="1">Prev</button>
        <button type="button" data-js="navigate-to-step" data-step="3">Next</button>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="js-tabStep3">
        Step 3
        <button type="button" data-js="navigate-to-step" data-step="2">Prev</button>
        <button type="button" data-js="navigate-to-step" data-step="4">Next</button>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="js-tabStep4">
        Step 4
        <button type="button" data-js="navigate-to-step" data-step="3">Prev</button>
    </div>
</div>