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

时间:2014-04-17 16:48:26

标签: jquery twitter-bootstrap tabs

我在bootstrap中使用标签:

<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类不会更改。我错过了什么?

2 个答案:

答案 0 :(得分:3)

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

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

http://www.bootply.com/130874

答案 1 :(得分:2)

不是使用href和数据切换方法,最好的选择可能是直接进行javascript切换。 (由于标签是Bootstrap JS component。)

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

请参阅:http://plnkr.co/edit/DdHLjgjK23KF8fJd1gMw