我在bootstrap上做了标签。
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li><a href="#menu23" data-toggle="tab">Beethoven</a></li>
<li><a href="#menu24" data-toggle="tab">Bach</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="menu23">
item1
</div>
<div class="tab-pane" id="menu24">
item2
</div>
</div>
我想通过按钮或某些动作激活item1或item2。
我该怎么做?
答案 0 :(得分:5)
使用bootstrap按钮导航下一步|上一页
<div class="btn-group">
<button class="btn" id="prevtab" type="button">Prev</button>
<button class="btn" id="nexttab" type="button">Next</button>
</div>
然后在你的javascript中添加
var $tabs = $('.tabbable li');
$('#prevtab').on('click', function() {
$tabs.filter('.active')
.prev('li')
.find('a[data-toggle="tab"]')
.tab('show');
});
$('#nexttab').on('click', function() {
$tabs.filter('.active')
.next('li')
.find('a[data-toggle="tab"]')
.tab('show');
});
答案 1 :(得分:1)
你可以使用$(selector).tab('show'); bootstrap在文档中写到它 http://getbootstrap.com/javascript/。 Check my exemple here.
更新
如果您希望在自动创建按钮时更加动态。 Example here
$(document).ready(function() {
$.each($("#tabs li a"), function(key, elm){
$("#buttons").append(
$("<a/>")
.text($(elm).text())
.addClass("btn")
.click(function() {
$(elm).tab('show');
})
);
});
});