bootstrap标签页(Tab)控件js获取当前tab页

1.说明

项目中遇到需求，需要通过按钮点击事件切换tab页面

2.解决思路

2.1 获取到当前**的tab页

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");