禁用Bootstrap中的选项卡

Question

禁用Bootstrap中的选项卡

javascriptjquerytwitter-bootstrapjquery-events

8

我正在尝试禁用Bootstrap中的选项卡。我已经进行了研究，但尚未找到解决方案。

我尝试了这个：Can you disable tabs in Bootstrap? 它引导我进入了Bootstrap问题... 我也尝试了 $('.disabled').removeData('toggle');

我在这里看到了一些内容：https://github.com/twitter/bootstrap/issues/2764 尝试过的解决方案： - 返回false

jQuery disable a link 尝试过的解决方案： - event.defaultPrevented();

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

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', '');
});
});

- ryandawkins

如果您想要使用“下一个/上一个”按钮来禁用选项卡，请查看此链接：https://dev59.com/qXnZa4cB1Zd3GeqPnTYP#20672122。 - RasikaSam

6个回答

8

这是解决方案。看起来bootstrap不喜欢手动更改活动标签。

$(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', '');
    });
});

- ryandawkins

实际上，我无法在jsFiddle上使任何发布的解决方案对我起作用，但我很高兴你找到了适合你的东西。 - Sara

很奇怪它在 jsFiddle 上无法工作。我在我的项目中使用的代码和在 jsFiddle 上使用的代码是完全相同的，除了选项卡中的内容不同... - ryandawkins

哈，你的bootstrap.js包含有一个错别字 - <script src="http://twitter.github.com /bootstrap/assets/js/bootstrap.js">（注意空格） - Sara

@Sara 这很奇怪！我的代码在我的电脑上可以运行，但在 fiddle 上却不行。嗯，至少找到了一个解决方案！ - kyle.stearns

@kyle.stearns 罪魁祸首是 fiddle 中 bootstrap.js 引用中的空格。 - Sara

我也遇到了同样的问题。即使我添加了一个 console.log 函数来显示是否检测到了 disabled 类，它仍然会继续打开选项卡。 - jeffkee

1

这些都对我没用。这些类只是视觉元素，而在某些选项卡上点击返回false并不能覆盖现有的功能。更不用说根据输入打开和关闭选项卡很困难。

这是我想出来的解决方案，让另一个选项卡将用户带回它。

$('#rentalstab_button').click(function(event){
    if ($(this).hasClass('disabled')) {
        $('#detailstab_button').trigger('click');
        return false;
    }
});

该标签上的HTML触发：

<li role="presentation"><a href="#basicinfotab" role="tab" data-toggle="tab">Basic Info</a></li>
<li role="presentation"><a href="#detailstab" role="tab" data-toggle="tab" id="detailstab_button">Details</a></li>
<li role="presentation"><a href="#rentalstab" role="tab" data-toggle="tab" id="rentalstab_button">Rental</a></li>

JavaScript代码将选项卡按钮从禁用状态变为启用状态等。在此代码中，rentaldropdown元素是另一个

- jeffkee

1

试试这个：

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

我将你的 .not() 更改为 if 语句，因为我认为它导致事件绑定不正确。
我还删除了两个只返回 false 的点击事件，因为它们似乎是多余的。

jsFiddle

- Sara

这使得选项卡可以被点击，但是内容没有改变。这意味着数据切换没有发生，我猜测是因为返回 true 导致的问题吗？我尝试删除了 return true 语句，但它并没有改变任何效果。 - ryandawkins

我已将问题隔离到更改 #bank-tab 和 #store-tab 类属性的行。但是，我不理解这些如何影响问题。当将其注释掉时，一切功能正常。我猜想这可能会干扰 bootstrap？ - ryandawkins

1

尝试改用这段JavaScript代码，应该就可以工作了！它更加精简，并且没有不必要的 click 函数，因为Bootstrap JavaScript已经内置了它们。它只是禁用了选项卡，并在单击“激活”按钮时重新启用它们。

$(document).ready(function(){

    $('.nav li').attr('class', 'disabled');
    $('#bank-tab').addClass('active');

    $('.selectKid').click(function(e){
        if ( $('.disabled').length > 0 ) {
           $('.disabled').removeClass('disabled');
           return false;
        }
    });

});

说明：当文档加载时，将.nav li添加一个disabled类（禁用选项卡）。将#bank-tab元素添加一个active类（用于样式目的）。当您点击“激活选项卡”按钮时，如果有与ul.nav li.disabled匹配的任何元素，则删除disabled类（以重新启用选项卡）。

- kyle.stearns

0

非常简单的方法

.nav-tabs li.active a{
    pointer-events:none;
}

- Rubel Hossain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pastilla · Accepted Answer

HTML: 只需添加class disabled

JQUERY：

$(".disabled").click(function (e) {
        e.preventDefault();
        return false;
});