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

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

- LA_

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

- balexandre

---

不要使用数字作为ID...始终以字母开头！ - balexandre

@balexandre，使用像tabN而不是只有N的id并不能帮助原始方法-http://jsfiddle.net/and7ey/BM973/1/，是的，你的代码在jsfiddle上运行良好-http://jsfiddle.net/and7ey/BM973/2/，最重要的部分，我之前没有理解的是：id tab应该被分配给ul和#tab（而不是我以为的标签id）在调用函数时应始终使用。 - LA_

@balexandre，我发现这种方法有一个错误 - 当选项卡包含大量文本时，向顶部滚动不会发生 - http://jsfiddle.net/and7ey/BM973/10/ - LA_

@balexandre，如果我返回“true”，那么表单将被提交，而这正是我想避免的。 - LA_

@balexandre，请检查我的最后一个示例 - 如果按钮位于 form fieldset .form-actions 中，这就是 Twitter Bootstrap 所做的。 - LA_

Answer 2

使用data-toggle="tab"在<a>标签中怎么样？类似于这样：

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

- Stephen Cox

---

是的，它显示了下一个选项卡，但不完全正确 - 下一个选项卡的内容被显示出来，但仍然将第一个选项卡突出显示为已选择。 - LA_

我尝试在内容面板中的TAB 2上的href链接上尝试打开TAB 1的内容面板，效果完美...但是活动选项卡状态没有改变。我使用了正确的href #id和data-toggle =“tab”，甚至尝试将class = active添加到href中，但都不起作用...有什么想法吗？ - 422