How to change Twitter Bootstrap tab, when button is pressed?

问题

I need to change the tab when button is pressed, and the tab should be identified by id. The following code doesn't work for me - just the page is reloaded:

<div class="form-actions">
  <button class="btn btn-primary" id="btn-next">Next</button>
  <button type="reset" class="btn">Clear</button>
</div>
...
<div class="tab-pane active" id="2">
...

$("#btn-next").click(function(event) {
  $('#2').tab('show');
});

回答1:

You can use something like this:

function nextTab(elem) {
  $(elem + ' li.active')
    .next()
    .find('a[data-toggle="tab"]')
    .click();
}
function prevTab(elem) {
  $(elem + ' li.active')
    .prev()
    .find('a[data-toggle="tab"]')
    .click();
}

and use nextTab('#tab'); or prevTab('#tab');

Live example with continue actions: http://jsbin.com/atinel/9/edit#javascript,html

回答2:

What about using the data-toggle="tab" in an <a> tag? Something like:

  <a href="#2" class="btn btn-primary" id="btn-next" data-toggle="tab">Next</a>

来源：https://stackoverflow.com/questions/9252127/how-to-change-twitter-bootstrap-tab-when-button-is-pressed