bootstrap nav nav-tabs add tab javascript

$('#btnAdd').click(function (e) {
var nextTab = $('#tabs li').size()+1;

// create the tab
$('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

// create the tab content
$('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');

// make the new tab active
$('#tabs a:last').tab('show');
});

 

 

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')

 

// 选取第一个标签页
$('#myTab a:first').tab('show')

 

// 选取最后一个标签页
$('#myTab a:last').tab('show')

 

// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

 

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：

<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="svn">...</div>
<div class="tab-pane fade" id="ios">...</div>
<div class="tab-pane fade" id="java">...</div>
</div>

转载于:https://www.cnblogs.com/zany-hui/articles/4754808.html