Question

我需要在按下按钮时更改选项卡，并且应该通过id标识选项卡。以下代码对我不起作用 - 只重新加载页面：

<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');
});

Answer 1

您可以使用以下内容：

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();
}

并使用nextTab('#tab');或prevTab('#tab');

实例，包含继续操作：http://jsbin.com/atinel/9/edit#javascript,html

Answer 2

如何在data-toggle="tab"代码中使用<a>呢？类似的东西：

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

按下按钮时如何更改Twitter Bootstrap选项卡？

2 个答案: