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

【问题标题】：How to change Twitter Bootstrap tab, when button is pressed?按下按钮时如何更改 Twitter Bootstrap 选项卡？
【发布时间】：2012-02-12 19:52:05
【问题描述】：

我需要在按下按钮时更改选项卡，并且选项卡应由 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');
});

【问题讨论】：

标签： jquery jquery-selectors twitter-bootstrap

【解决方案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

【讨论】：

奇怪，但在我的情况下不起作用（我使用 '#2' 而不是 '#tab'）。并且使用实时示例它只工作一次（如果我第二次按 Next，jsbin 会显示代码）。我用的是最新版本的FF。
不要将数字作为身份证件...始终以字母开头！
@balexandre jsbin 确实有 LA_ 描述的错误，但是在我的代码中可以正常工作。谢谢
@balexandre，像 tabN 这样的 ID 的使用而不是 N 对原始方法没有帮助 - jsfiddle.net/and7ey/BM973/1，是的，你的代码在 jsfiddle - jsfiddle.net/and7ey/BM973/2 上运行良好，最重要的部分，我以前没有得到的：id tab 应该分配给 ul 和 #tab（而不是我认为的标签 id）在调用函数时总是应该使用。
@balexandre，我发现这种方法的一个错误 - 当标签包含大量文本时，不会滚动到顶部 - jsfiddle.net/and7ey/BM973/10

【解决方案2】：

在<a> 标记中使用data-toggle="tab" 怎么样？比如：

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

【讨论】：

是的，它显示下一个选项卡，但不完全正确 - 显示下一个选项卡的内容，但仍突出显示第一个选项卡。
我在说 TAB 2 的内容面板中的 href 链接上尝试了此操作以打开 TAB 1 内容面板，效果很好..但活动选项卡状态没有改变。我正在使用正确的 href #id 和 data-toggle="tab" 甚至尝试将 class=active 添加到 href，不行.. 有什么想法吗？