Onglet Bootstrap: boutons Suivant et précédent pour les formulaires
j'essaie (éventuellement) de diviser un formulaire en plusieurs Bootstrap 3.tabs x, mais j'ai des problèmes avec les boutons Précédent et suivant. Seul le premier bouton Suivant fonctionne et parfois le contenu de l'onglet ne change pas du tout entre les onglets lorsque les onglets sont cliqués manuellement ou en utilisant les boutons.
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
<li><a href="#tab2" data-toggle="tab">Quantities</a></li>
<li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary" id="btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary" id="btnNext">Next</a>
<a class="btn btn-primary" id="btnPrevious">Previous</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary" id="btnPrevious">Previous</a>
</div>
</div>
<script>
$('#btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('#btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
25
demandé sur
Benjamin Morrison
2014-03-10 14:42:36
1 réponses
Tout d'Abord : ID MUST BE UNIQUE
Voici votre code de travail:http://www.bootply.com/120472
HTML :
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
<li><a href="#tab2" data-toggle="tab">Quantities</a></li>
<li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext" >Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
</div>
JS :
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
Extrait de code:
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
<li><a href="#tab2" data-toggle="tab">Quantities</a></li>
<li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext" >Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnPrevious" >Previous</a>
</div>
</div>
63
répondu
candybeer
2018-03-27 15:16:15