Fórum Botão do Bootstrap 4 Tabs Wizard não funciona no Bootstrap 4.0.0-beta #586210
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 :)