logo标签列表

你能否在Bootstrap中禁用标签页？

javascriptcsstwitter-bootstraptwitter-bootstrap-2
143

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

17个回答
199
你可以从选项卡中删除 data-toggle="tab" 属性，因为它是使用live/delegate事件连接的。
11
谢谢，这很有效，另外我还加了CSS的"cursor:no-drop;"属性，这样用户就知道为什么无法点击它。 - arbme
24
在这种情况下，使用“cursor: not-allowed;”更为恰当，除非你实际上正在拖放。 - Christophe Geers
9
可以将一个"disabled"类添加到这个li元素中。 - Pencilcheck
6
你需要同时采用以上两个建议：给<li>添加"disabled"类，并从选项卡中删除data-toogle或href属性。 - Scabbia
9
我只是添加了这个CSS，现在 class="disabled" 就像预期一样工作了。.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } } - effe
显示剩余4条评论
51
1
这是其中一个主要功能，令我感到困惑的是它还没有被实现。 - DS_web_developer
它已在v3中实现。 - Jeroen K
9
是的，但链接仍然可以被点击。 - svlada
3
目前为止，可行的解决方案是移除data-toggle属性。 - Cyril N.
37

我添加了以下Javascript代码来防止单击禁用链接：

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});
9
我认为这个答案应该是将这个回答和 @hotzu 的回答结合起来。你应该向 li 元素添加 disabled 类，然后添加你指定的 JavaScript 代码，但你要检查的条件是：if ($(this).parent().hasClass('disabled')) {..}。 - mellis481
@im1dermike 我不明白为什么我要这样做？ - totas
这是一个老问题，但这就是我找到的，所以我要添加这个。你会进行这个检查，因为li是改变用户视觉效果的元素，因此应该具有disabled类。 - Jared
27

我认为最好的解决方案是使用CSS禁用它。 你可以定义一个新的类并在其上关闭鼠标事件：

.disabledTab{
    pointer-events: none;
}

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

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

你也可以使用jQuery添加/删除类。例如，要禁用所有选项卡：

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

这里有一个示例：jsFiddle

我强烈建议不要这样做。因为仅使用CSS的解决方案会使选项卡可点击。如果有其他事件监听这些点击，它们将被执行，这不是期望的结果。（我猜？） - Rafael Herscovici
在我的情况下，这个方法很有效。我建立了一个由多个选项卡组成的表单。通过一个按钮来切换到下一个选项卡，该按钮会触发点击事件以跳转到相应的选项卡。因此，完全禁用点击对我来说不是一个选择，但是从选项卡中删除指针事件正是我所需要的。 - sebastian
19

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

.nav-tabs li.disabled a {
    pointer-events: none;
}
1
我必须在 li.disabled 上执行此操作（而不是 li.disabled a）。 - Daniel
11

另外，我正在使用以下解决方案：

Also, I'm using following solution:

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

现在，您只需将class“disabled”添加到父级li中，选项卡即不起作用并变为灰色。

6

对于我的使用情况，最好的解决方案是结合以下答案：

  • 向我想要禁用的li元素添加disabled类
  • 添加以下JS代码：
$(".nav .disabled>a").on("click", function(e) {
    e.preventDefault();
    return false;
});
  • 如果您希望Bootstrap不干扰您的代码，甚至可以删除data-toggle =“tab”属性。

注意：即使您删除了data-toggle，此处的JS代码仍然很重要，否则它会通过添加#your-id值来更新您的URL，这是不推荐的，因为您的选项卡已禁用，因此不应被访问。

6

虽然这是一道老问题，但它仍帮助我找到了正确的方向。 我所采用的方法是在li上添加disabled类，然后将下面的代码添加到我的Javascript文件中。

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

这将禁用带有禁用类的 li 的任何链接。有点类似于 totas 的答案，但它不会在用户单击任何选项卡链接时每次运行 if，并且它不使用 return false。希望对某人有用！
1
很好！但需要在e.stopImmediatePropagation()之前加上e.preventDefault()。 - meuwka
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>
2
假设这是你的选项卡并且你想要禁用它。
<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>

所以您也可以通过添加动态CSS来禁用此选项卡。
$('#groups').css('pointer-events', 'none')
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接