Question

我有一系列引导标签。如果标签仍在加载，则下一个标签不应显示或高亮显示。

这是我到目前为止所做的，我尝试玩hide.bs.tab而没有任何积极的结果。我也尝试更改数据切换数据，但它不起作用。

var tabIsLoading    =   false;

$('[data-toggle="tabajax"]').click(function(e) {

    e.preventDefault();

    if($(this).hasClass('disabled')){

        return;

    }

    var $this   = $(this),
    loadurl     = $this.attr('href'),
    targ        = $this.attr('data-target');
    loader      = 'Loading ...';

    $('a[data-toggle="tabajax"]').parents().toggleClass('disabled');

    $(targ).html(loader);

    tabIsLoading=true;

    $('a[data-toggle="tabajax"]').attr('data-toggle','_loading');

    $.get(loadurl, function(data) {

        $(targ).html(data);
        tabIsLoading=false;

        $('a[data-toggle="_loading"]').attr('data-toggle','tabajax');
        $('a[data-toggle="tabajax"]').parents().removeClass('disabled');

    }).error(function(){

        $('a[data-toggle="_loading"]').attr('data-toggle','tabajax');
        $('a[data-toggle="tabajax"]').parents().removeClass('disabled');

    });

    $this.tab('show');

    return false;

});

Answer 1

我找到了解决方案，它至少对我有用我可以根据要求给你相应的HTML，我总是在任何时候，所以如果你需要解决这个问题，请给我留言。很乐意帮助那里的任何人。

<script type="text/javascript">

    var tabIsLoading    =   false;
    var curTab          =   null;
    var prevTab         =   null;

    $('a[data-toggle="tabajax"]').on('show.bs.tab',function(e){

        if(tabIsLoading){
            $(prevTab).parent().addClass('active');
            $(curTab).parent().removeClass('active');
        }

    });


    $('[data-toggle="tabajax"]').click(function(e) {

        e.preventDefault();
        curTab      =   $(this);

        $('[data-toggle="tabajax"]').each(function(){

            if($(this).hasClass('active')){
                prevTab =   $(this);
            }

        });

        if(tabIsLoading){
            return;
        }

        var $this   = $(this),
        loadurl     = $this.attr('href'),
        targ            = $this.attr('data-target');
        loader      = '<div class="tab-ajax-load"><span class="spin"><i class="fa fa-refresh"></i></span><p>Loading ...</p></div>';

        $(targ).html(loader);

        tabIsLoading=true;

        $('a[data-toggle="tabajax"]').parent().toggleClass('disabled');

        $.get(loadurl, function(data) {

            $(targ).html(data);
            tabIsLoading=false;
            $('a[data-toggle="tabajax"]').parent().toggleClass('disabled');
            $('a[data-toggle="tabajax"]').blur();

        }).error(function(){

            $('a[data-toggle="tabajax"]').parent().toggleClass('disabled');
            $('a[data-toggle="tabajax"]').blur();

        });

        $this.tab('show');

        return false;

    });
</script>

取消选项卡显示AJAX是否仍在加载

1 个答案: