142

你能像禁用按钮一样禁用 Bootstrap 2.0 中的选项卡吗?

4

17 回答 17

196

您可以从选项卡中删除该data-toggle="tab"属性,因为它使用实时/委托事件连接

于 2012-02-11T02:35:46.557 回答
51

从 2.1 开始,您可以从http://twitter.github.com/bootstrap/components.html#navs上的引导文档。

禁用状态

对于任何导航组件(选项卡、药丸或列表),为灰色链接添加 .disabled 并且没有悬停效果。但是,除非您删除 href 属性,否则链接将保持可点击状态。或者,您可以实施自定义 JavaScript 来防止这些点击。

有关功能添加讨论,请参阅https://github.com/twitter/bootstrap/issues/2764

于 2012-12-07T22:10:24.400 回答
37

我添加了以下 Javascript 以防止点击禁用的链接:

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});
于 2013-12-04T15:28:01.787 回答
25

我认为最好的解决方案是使用 css 禁用。您定义一个新类并关闭其上的鼠标事件:

.disabledTab{
    pointer-events: none;
}

然后将此类分配给所需的 li 元素:

<li class="disabled disabledTab"><a href="#"> .... </a></li>

您也可以使用 jQuery 添加/删除类。例如,要禁用所有选项卡:

$("ul.nav li").removeClass('active').addClass('disabledTab');

这是一个例子:jsFiddle

于 2014-03-17T09:22:38.010 回答
19

不需要任何 Jquery,只需一行 CSS

.nav-tabs li.disabled a {
    pointer-events: none;
}
于 2017-02-10T04:41:39.703 回答
11

另外,我正在使用以下解决方案:

$('a[data-toggle="tab"]').on('click', function(){
  if ($(this).parent('li').hasClass('disabled')) {
    return false;
  };
});

现在,您只需将“禁用”类添加到父 li 和选项卡就不起作用并变成灰色。

于 2015-01-26T13:51:05.427 回答
6

老问题,但它为我指明了正确的方向。我采用的方法是将禁用的类添加到 li,然后将以下代码添加到我的 Javascript 文件中。

$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
    e.stopImmediatePropagation();
});

这将禁用 li 具有禁用类的任何链接。有点类似于 totas 的答案,但它不会在每次用户单击任何选项卡链接时运行,并且它不使用 return false。

希望它对某人有用!

于 2014-08-28T10:04:48.913 回答
6

对于我的使用,最好的解决方案是这里的一些答案的混合,它们是:

  • disabled类添加到我要禁用的 li
  • 添加这段 JS :
$(".nav .disabled>a").on("click", function(e) {
    e.preventDefault();
    return false;
});
  • 如果您希望 Bootstrap 完全不干扰您的代码,您甚至可以删除 data-toggle="tab" 属性。

注意这里的 JS 代码很重要,即使您删除了 data-toggle,否则它会通过添加#your-id值来更新您的 URL,不建议这样做,因为您的选项卡已禁用,因此不应访问。

于 2014-09-29T13:04:40.340 回答
5

只有 css,您可以定义两个 css 类。

<style type="text/css">
    /* Over the pointer-events:none, set the cursor to not-allowed.
    On this way you will have a more user friendly cursor. */
    .disabledTab {
        cursor: not-allowed;
    }
    /* Clicks are not permitted and change the opacity. */
    li.disabledTab > a[data-toggle="tab"] {
        pointer-events: none;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }
</style>

这是一个 html 模板。唯一需要的是将类设置为您的首选列表项。

<ul class="nav nav-tabs tab-header">
    <li>
        <a href="#tab-info" data-toggle="tab">Info</a>
    </li>
    <li class="disabledTab">
        <a href="#tab-date" data-toggle="tab">Date</a>
    </li>
    <li>
        <a href="#tab-photo" data-toggle="tab">Photo</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab-info">Info</div>
    <div class="tab-pane active" id="tab-date">Date</div>
    <div class="tab-pane active" id="tab-photo">Photo</div>
</div>
于 2017-01-11T11:56:26.790 回答
2

假设,这是你的 TAB,你想禁用它

<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>

所以你也可以通过添加动态css来禁用这个选项卡

$('#groups').css('pointer-events', 'none')
于 2017-03-07T10:55:21.193 回答
1

除了詹姆斯的回答:

如果您需要禁用链接使用

$('a[data-toggle="tab"]').addClass('disabled');

如果您需要阻止禁用的链接加载选项卡

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

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

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

如果您需要无法链接

$('a[data-toggle="tab"]').removeClass('disabled');
于 2016-05-07T17:46:31.100 回答
1

您可以通过将类添加到 nav-item 的子项来禁用引导程序 4 中的选项卡,disabled如下所示

<li class="nav-item">
    <a class="nav-link disabled" data-toggle="tab" href="#messages7" role="tab" aria-expanded="false">
        <i class="icofont icofont-ui-message"></i>Home</a>
    <div class="slide"></div>
</li>
于 2019-09-29T13:53:16.670 回答
0

我尝试了所有建议的答案,但最后我让它像这样工作

if (false) //your condition
{
    $("a[data-toggle='tab'").prop('disabled', true);
    $("a[data-toggle='tab'").each(function () {
        $(this).prop('data-href', $(this).attr('href')); // hold you original href
        $(this).attr('href', '#'); // clear href
    });                
    $("a[data-toggle='tab'").addClass('disabled-link');
}
else
{
    $("a[data-toggle='tab'").prop('disabled', false);
    $("a[data-toggle='tab'").each(function () {
        $(this).attr('href', $(this).prop('data-href')); // restore original href
    });
    $("a[data-toggle='tab'").removeClass('disabled-link');
}
// if you want to show extra messages that the tab is disabled for a reason
$("a[data-toggle='tab'").click(function(){
   alert('Tab is disabled for a reason');
});
于 2014-09-13T12:27:00.660 回答
0

没有一个答案对我有用。data-toggle="tab"从 中删除a可防止选项卡激活,但它也会将#tabId哈希添加到 URL。这是我无法接受的。使用 javascript 也是不可接受的。

起作用的是将disabled类添加到li并删除href其包含的属性a

于 2014-11-06T18:57:11.833 回答
0

我的标签在面板中,所以我在标签锚中添加了一个 class='disabled'

在javascript中我添加了:

$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    if ($(this).hasClass('disabled')){
        e.preventDefault();
        return false;
    }
})

并在较少的演示文稿中添加:

.panel-heading{
    display:table;
    width:100%;
    padding-bottom:10px;
    ul.nav-tabs{
        display:table-cell;
        vertical-align:bottom;
        a.disabled{
            .text-muted;
            cursor:default;
            &:hover{
                background-color:transparent;
                border:none;
            }
        }
    }
}
于 2016-08-02T05:03:54.720 回答
0

避免这种情况的最简单和干净的解决方案是添加 onclick="return false;"标签a

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#home" onclick="return false;">Home</a>
    </li>    
    <li>
        <a href="#ApprovalDetails" onclick="return false;">Approval Details</a>
    </li>
</ul>
  • 添加"cursor:no-drop;"只是使光标看起来被禁用,但是是可点​​击的,Url 附加了 href 目标,例如page.apsx#Home
  • 无需添加"disabled"<li>和删除href
于 2016-08-30T10:16:31.463 回答
-1

这是我的尝试。要禁用选项卡:

  1. 将“禁用”类添加到选项卡的 LI;
  2. 从 LI > A 中移除 'data-toggle' 属性;
  3. 抑制 LI > A 上的“点击”事件。

代码:

var toggleTabs = function(state) {
    disabledTabs = ['#tab2', '#tab3'];
    $.each(disabledTabs, $.proxy(function(idx, tabSelector) {
        tab = $(tabSelector);
        if (tab.length) {
            if (state) {
                // Enable tab click.
                $(tab).toggleClass('disabled', false);
                $('a', tab).attr('data-toggle', 'tab').off('click');
            } else {
                // Disable tab click.
                $(tab).toggleClass('disabled', true);
                $('a', tab).removeAttr('data-toggle').on('click', function(e){
                    e.preventDefault();
                });
            }
        }
    }, this));
};

toggleTabs.call(myTabContainer, true);
于 2015-10-30T00:16:15.693 回答