Я пытаюсь (в конечном итоге) разделить форму на несколько вкладок Bootstrap 3.x, но у меня возникают проблемы с предыдущей и следующей кнопками. Только первая следующая кнопка функционирует, и иногда содержимое вкладки не изменяется вообще между вкладками, когда вкладки вручную нажаты или с помощью кнопок.
<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>