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

时间：2012-02-11 02:29:06

标签： javascript css twitter-bootstrap twitter-bootstrap-2

你可以在Bootstrap 2.0中禁用选项卡，就像你可以禁用按钮一样吗？

17 个答案:

答案 0 :(得分：179)

您可以使用实时/委托事件连接选项卡中的data-toggle="tab"属性

答案 1 :(得分：45)

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

  

禁用状态

     

对于任何导航组件（标签，药片或列表），请为。灰色添加.disabled   链接，没有悬停效果。但是，链接仍然可以点击   除非你删除href属性。或者，你可以   实现自定义JavaScript以防止这些点击。

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

答案 2 :(得分：33)

我添加了以下Javascript以防止点击已停用的链接：

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

答案 3 :(得分：19)

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

.disabledTab{
    pointer-events: none;
}

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

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

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

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

以下是一个示例：jsFiddle

答案 4 :(得分：11)

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

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

答案 5 :(得分：9)

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

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

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

答案 6 :(得分：6)

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

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

  • 添加这段JS：

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

  • 您甚至可以删除data-toggle =＆＃34;标签＆＃34;属性，如果你想让Bootstrap不干扰你的代码。

****注意**：**这里的JS代码很重要，即使您删除了数据切换，否则它将通过向其添加#your-id值来更新您的URL，这是不建议使用，因为您的选项卡已禁用，因此不应访问。

答案 7 :(得分：6)

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

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

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

希望它对某人有用！

答案 8 :(得分：3)

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

答案 9 :(得分：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')

答案 10 :(得分：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');

答案 11 :(得分：0)

这些答案都不适合我。从data-toggle="tab"删除a会阻止标签激活，但它也会将#tabId哈希添加到网址中。这对我来说是不可接受的。使用javascript也是不可接受的。

将disabled类添加到li并删除其包含href的{​​{1}}属性的工作是什么。

答案 12 :(得分：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');
});

答案 13 :(得分：0)

我的标签位于面板中，因此我添加了一个类=＆＃39;已禁用＆＃39;到标签锚

在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;
            }
        }
    }
}

答案 14 :(得分：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 target for ex page.apsx#Home
  • 无需将"disabled"课程添加到<li>并删除href

答案 15 :(得分：0)

您可以通过将类disabled添加到nav-item的子项来禁用引导程序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>

答案 16 :(得分：-1)

这是我的尝试。要禁用标签：

  1. 添加＆＃34;禁用＆＃34; class to tab＆＃;; LI;
  2. 删除＆＃39;数据切换＆＃39;来自LI的属性＆gt; A;
  3. 禁止点击＆＃39;关于LI的事件＆gt;甲

    4. 代码：

    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);
相关问题
最新问题