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

补充:后面用这种方式可以获取到 

$('#控件id').find("li.active a").attr("属性值");

发布了116 篇原创文章 · 获赞 17 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览