我在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
类不会更改。我错过了什么?
答案 0 :(得分:3)
这是@ Hop的类似方法,适用于任意数量的标签。每个选项卡窗格都会添加一个“继续”按钮,以导航到下一个选项卡...
$('.cont').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
答案 1 :(得分:2)
不是使用href和数据切换方法,最好的选择可能是直接进行javascript切换。 (由于标签是Bootstrap JS component。)
<script>
$("#tab2Button").click(function() {
$('#guide-tabs li:eq(1) a').tab('show');
})
</script>