你可以在Bootstrap中禁用选项卡吗？

Question

您是否可以禁用Bootstrap 2.0中的选项卡,就像您可以禁用按钮一样？

Answer 1

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

Answer 2

从2.1开始,您可以从http://twitter.github.com/bootstrap/components.html#navs的 bootstrap文档中获取.

禁用状态

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

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

Answer 3

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

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});

Answer 4

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

.disabledTab{
    pointer-events: none;
}

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

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

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

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

这是一个例子:jsFiddle

Answer 5

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

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

Answer 6

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

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

现在,您只需将"禁用"类添加到父级li,选项卡不起作用并变为灰色.

Answer 7

老问题,但它有点指向我正确的方向.我去的方法是将禁用的类添加到li中,然后将以下代码添加到我的Javascript文件中.

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

这将禁用li具有禁用类的任何链接.有点类似于totas的答案,但如果每次用户点击任何标签链接并且它不使用return false,它将不会运行.

希望它对某人有用!

Answer 8

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

• 将disabled类添加到我要禁用的li

• 添加这段JS:

     `$(".nav .disabled>a").on("click", function(e) {
          e.preventDefault();
          return false;
      });`
  

• 如果您希望Bootstrap不干扰您的代码,您甚至可以删除data-toggle ="tab"属性.

****注意**:**这里的JS代码很重要,即使你删除了数据切换,否则它会通过添加#your-id值来更新你的URL,因为你的选项卡被禁用,所以不建议这样做,因此不应该被访问.

Answer 9

随着唯一的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>