Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
152
rated 0 times [  158] [ 6]  / answers: 1 / hits: 20657  / 12 Years ago, thu, august 9, 2012, 12:00:00

I have the following code: http://jsfiddle.net/h6rQ2/2/



I'm using html to create a basic form. This form has two sections -- each section is contained within a tab (tabs created with Twitter Bootstrap).



How do I create a next button which switches from the first tab to the second tab? When I try doing it right now, it only submits the form. Does Twitter Bootstrap already provide a function that lets you switch tabs via an external button? If so, how do you use it?


More From » html

 Answers
31

Given those buttons :



<div class=btn-group>
<button class=btn id=prevtab type=button>Prev</button>
<button class=btn id=nexttab type=button>Next</button>
</div>


You'd need this JS :



var $tabs = $('.tabbable li');

$('#prevtab').on('click', function() {
$tabs.filter('.active').prev('li').find('a[data-toggle=tab]').tab('show');
});

$('#nexttab').on('click', function() {
$tabs.filter('.active').next('li').find('a[data-toggle=tab]').tab('show');
});


Working demo (jsfiddle)


[#83743] Wednesday, August 8, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;