在Bootstrap中禁用选项卡 [英] Disabling Tabs in Bootstrap

问题描述

我正在尝试禁用引导程序中的选项卡。我一直在研究，我还没有找到解决方案。

I am trying to disable the tabs in bootstrap. I have been researching and I have not yet found a solution.

我试过这个：你可以在Bootstrap中禁用标签吗？
它引导我去引导问题......我也试过 $（ '.disabled'）。removeData（'toggle'）;

我看了这里.. https://github.com/twitter/bootstrap/issues/2764
解决方案尝试：
- 返回false

I looked here.. https://github.com/twitter/bootstrap/issues/2764 Solution Attempted: - Returning false

jQuery禁用链接
解决方案尝试：
- event.defaultPrevented（）;

但我有没想出答案。到目前为止，我的问题是该选项卡将通过返回false来禁用。但是，当选项卡处于活动状态并且可以单击时，它不会像它应该那样转换到其他选项卡。

And yet I have not come up with an answer. So far my problem is that the tab will disable, by returning false. However, when the tab is active and can be clicked it will not transition to the other tab like it should.

jsfiddle： http://jsfiddle.net/de8QK/

jsfiddle: http://jsfiddle.net/de8QK/

这是我的代码：

$(document).ready(function(){

$('#store-tab').attr('class', 'disabled');
$('#bank-tab').attr('class', 'disabled active');

$('#store-tab').not('#store-tab.disabled').click(function(event){
    $('#store-tab').attr('class', 'active');
    $('#bank-tab').attr('class', '');
    return true;
});
$('#bank-tab').not('#bank-tab.disabled').click(function(event){
    $('#bank-tab').attr('class' ,'active');
    $('#store-tab').attr('class', '');
    return true;
});

$('#store-tab').click(function(event){return false;});
$('#bank-tab').click(function(event){return false;});

$('.selectKid').click(function(event){
    $('.checkbox').removeAttr("disabled");
    $('#bank-tab').attr('class', 'active');
    $('#store-tab').attr('class', '');
});
});

推荐答案

以下是解决方案。似乎bootstrap不喜欢你手动更改活动标签。

Here's the solution. It seems bootstrap doesn't like you changing the active tags manually.

$(document).ready(function(){
    $('#store-tab').attr('class', 'disabled');
    $('#bank-tab').attr('class', 'disabled active');

    $('#store-tab').click(function(event){
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });
    $('#bank-tab').click(function(event){
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });

    $('.selectKid').click(function(event){
        $('.checkbox').removeAttr("disabled");
        $('#bank-tab').attr('class', 'active');
        $('#store-tab').attr('class', '');
    });
});

这篇关于在Bootstrap中禁用选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！