如何使用按钮在引导程序中的选项卡之间移动答案

【问题标题】：How to use a button to move between tabs in bootstrap如何使用按钮在引导程序中的选项卡之间移动
【发布时间】：2014-04-17 16:48:26
【问题描述】：

我在引导程序中使用标签：

<ul class="list-group" id="guide-tabs">
  <li class="list-group-item active"><a href="#link1"  data-toggle="tab">Link 1</a></li>
  <li class="list-group-item"><a href="#link2"  data-toggle="tab">Link 2</a></li>
</ul>

<div class="tab-content">
   <div class="col-sm-8 tab-pane active" id="link1>Link 1 content </div>
   <div class="col-sm-8 tab-pane active" id="link2>Link 2 content </div>         
</div>

这可以很好地根据#guide-tabs 列表中的链接切换选项卡。

我现在想在#link1 内容中添加一个按钮以移动到下一个选项卡：

 <div class="col-sm-8 tab-pane active" id="link1>
    Link 1 content
    <a href="#link2" class="btn btn-default" data-toggle="tab">Link 2</a>
  </div>

此代码将打开选项卡，但列表组中的active 类不会更改。我错过了什么？

【问题讨论】：

标签： jquery twitter-bootstrap tabs

【解决方案1】：

不要使用 href 和 data-toggle 方法，最好的办法可能是直接进行 javascript 切换。（因为标签是Bootstrap JS component。）

<script>
  $("#tab2Button").click(function() {
    $('#guide-tabs li:eq(1) a').tab('show');
  })
</script>

见：http://plnkr.co/edit/DdHLjgjK23KF8fJd1gMw

【讨论】：

【解决方案2】：

这是一种与@Hop 类似的方法，适用于任意数量的选项卡。每个选项卡窗格中都添加了一个“继续”按钮以导航到下一个选项卡...

$('.cont').click(function(){
  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');
})

http://www.bootply.com/130874

【讨论】：