Javascript 可以在引导中禁用选项卡吗？

您可以像禁用按钮一样禁用Bootstrap 2.0中的选项卡吗？

您可以从选项卡中删除

data toggle=“tab”

属性，因为从2.1开始，该属性使用live/delegate events进行连接

残疾状态

对于任何导航组件（选项卡、药丸或列表），添加。灰色禁用 链接和无悬停效果。但是，链接仍然可以点击， 除非删除href属性。或者，你可以 实现自定义JavaScript以防止这些点击

---

有关“添加讨论”功能，请参见。

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

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

---

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

.disabledTab{
    pointer-events: none;
}

然后将该类指定给所需的li元素：

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

---

这里有一个例子：

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

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

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

---

希望它对某人有用

我尝试了所有建议的答案，但最后我还是这样做了

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

---

对于我来说，最好的解决方案是混合使用以下一些答案：

• 将

  disabled

  类添加到我要禁用的li
• 添加这段JS：

$（.nav.disabled>a”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
返回false；
});

• 如果希望引导与代码完全不干涉，甚至可以删除data toggle=“tab”属性

---

注意：此处的JS代码很重要，即使您删除了数据切换，否则它将通过添加

#您的id

值来更新您的URL，这是不推荐的，因为您的选项卡已禁用，因此不应访问。

我没有任何答案。从

a

中删除

data toggle=“tab”

，可防止选项卡激活，但也会将

#tabId

哈希添加到URL中。这是我无法接受的。使用javascript也是不可接受的

---

有效的方法是将

disabled

类添加到

li

并删除其包含

a

的

href

属性。此外，我使用以下解决方案：

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

---

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

以下是我的尝试。要禁用选项卡，请执行以下操作：

将“禁用”类添加到选项卡的li中

从li>A中删除“数据切换”属性

抑制li>A上的“单击”事件

代码：

---

除了詹姆斯的回答之外：

如果需要禁用链接，请使用

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

---

我的选项卡位于面板中，因此我向选项卡锚添加了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;
            }
        }
    }
}

---

避免这种情况的最简单和干净的解决方案是将

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>

• 添加

  “光标：无拖放；”

  只会使光标看起来被禁用，但可点击，Url会附加href target for ex

  page.apsx#Home

• 无需将

  “disabled”

  类添加到
  并删除

  href

使用仅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>

/*指针上方事件：无，将光标设置为不允许。
这样，您将拥有一个更加用户友好的光标*/
.disabledTab{
光标：不允许；
}
/*不允许单击并更改不透明度*/
li.disabledTab>a[data toggle=“tab”]{
指针事件：无；
过滤器：α（不透明度=65）；
-webkit盒阴影：无；
盒影：无；
不透明度：.65；
}

这是一个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>

信息
日期
照片

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

---

假设这是您的选项卡，您想禁用它

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

---

您可以通过向导航项的子项添加class

disabled

来禁用引导4中的选项卡，如下所示

<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>

感谢您的款待，还为cursor添加了css“cursor:no drop；”，以便use知道他们为什么不能单击它cursor:not allowed；在这种情况下更合适。除非您实际上是拖放。或者向li添加禁用类，否则您需要使用以上两种建议：将“禁用”类添加到

并从选项卡中删除数据toogle或href属性。我只是添加了此CSS，现在

class=“disabled”

按预期工作

.nav.nav-tabs>li.disabled{指针事件：无；a{颜色：银色；}}

这是主要功能之一，但令我吃惊的是它还没有实现编辑在v3Yes中实现，但链接仍然可以单击。确切地说，目前可行的解决方案是删除数据切换属性。thnx@hotzu u使我的一天变得轻松了……）我强烈建议不要这样做。因为只有css的解决方案才能使选项卡保持可单击状态。如果有其他事件侦听这些单击，它们将被执行，这不是期望的结果。（我猜？）在我的情况下，这就成功了。我构建了一个由多个选项卡组成的表单。继续

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

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

$('#groups').css('pointer-events', 'none')

<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>