Question

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

Answer 1

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

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

http://www.bootply.com/130874

Answer 2

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

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

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

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

2 个答案: