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:
HTML:
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
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)