bootstrap标签页（Tab）控件js获取当前tab页1.说明
项⽬中遇到需求，需要通过按钮点击事件切换tab页⾯
2.解决思路
2.1 获取到当前激活的tab页
bootstrap项目
2.2 使⽤ tab('show') 控制tab的显⽰
3.源码
#evalBaseInfoTab 为tab控件id，通过以下函数可以获取到控件中第⼏个tab页激活
function getCurrentTabIndex(){
var $tabs = $('#evalBaseInfoTab').children( 'li' );
var i=0;
$tabs.each( function() {
var $tab = $( this );
if($tab.hasClass('active')){
return false;
}else{
i++;
}
} );
return i;
}
通过以下代码控制，tab的显⽰和隐藏
$("#btn_next").click(function(){
var currentTabIndex = getCurrentTabIndex();
$('#evalBaseInfoTab li:eq('+(currentTabIndex+1)+') a').tab('show');
})
因本⽂中原需求为，上⼀步和下⼀步按钮控制tab标签页的显⽰。
⽹上还有⼀种⽅式，看代码没有问题，但是在实际项⽬中并没有取到当前激活的tab属性，⼤家也可以试⼀试
var href=this.$element.find(".nav-tabs li.active a").attr("href");
补充：后⾯⽤这种⽅式可以获取到
$('#控件id').find("li.active a").attr("属性值");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。