您可以禁用 Bootstrap 中的选项卡吗？

Posted 2023-02-22

【中文标题】您可以禁用 Bootstrap 中的选项卡吗？

【英文标题】：Can you disable tabs in Bootstrap?

【发布时间】：2012-03-03 11:38:29

【问题描述】：

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

【参考方案1】：

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

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

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

如果您希望 Bootstrap 完全不干扰您的代码，您甚至可以删除 data-toggle="tab" 属性。

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

【参考方案2】：

您可以通过将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>

【讨论】：

这是迄今为止 2021+ 年最好的答案

【参考方案3】：

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

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

【讨论】：

我必须在 li.disabled（不是 li.disabled a）上执行此操作

【参考方案4】：

假设，这是您的 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')

【参考方案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>

【参考方案6】：

避免这种情况的最简单和干净的解决方案是将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 会为前page.apsx#Home 附加href 目标 无需将"disabled" 类添加到<li> 并删除href

【参考方案7】：

我的标签在面板中，所以我在标签锚中添加了 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;
            
        
    

【参考方案8】：

除了詹姆斯的回答：

如果您需要禁用链接使用

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

【参考方案9】：

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

【讨论】：

感谢工作，还添加了 css "cursor:no-drop;" for cursor 所以使用知道为什么他们不能点击它

光标：不允许；在这种情况下更合适。除非你实际上是拖放。

或者添加一个禁用类到li

您需要同时使用上述两个建议：将“禁用”类添加到 并从选项卡中删除 data-toogle 或 href 属性

我只是添加了这个 CSS，现在 class="disabled" 按预期工作 .nav.nav-tabs > li.disabled pointer-events: none; a color: silver;

【参考方案10】：

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

将“禁用”类添加到选项卡的 LI； 从 LI > A 中删除“数据切换”属性； 抑制 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);

【参考方案11】：

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

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

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

【参考方案12】：

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

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

【讨论】：

现在我进一步阅读，这也与@Scott Stafford 的答案基本相同，后者在 2 年前回答了这个问题......

【参考方案13】：

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

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

【参考方案14】：

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

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

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

希望它对某人有用！

【讨论】：

好！但在 e.stopImmediatePropagation() 之前需要 e.preventDefault()

【参考方案15】：

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

.disabledTab
    pointer-events: none;

然后你将这个类分配给所需的 li 元素：

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

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

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

这里是一个例子：jsFiddle

【讨论】：

thnx @hotzu 你让我的一天变得轻松......:)

我强烈建议不要这样做。因为仅 css 解决方案使选项卡可单击。如果有其他事件在监听这些点击，它们将被执行，这不是预期的结果。 （我猜？）

就我而言，这成功了。我构建了一个由多个选项卡组成的表单。转到下一个选项卡是通过一个按钮完成的，该按钮会触发要转到的选项卡上的点击事件。所以完全禁用点击对我来说不是一个选项，但从选项卡中删除指针事件正是我所需要的。

【参考方案16】：

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

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

【讨论】：

我认为这和@hotzu 的回应相结合应该是答案。您应该将disabled 类添加到li 元素，然后添加您指定的javascript，但您要检查的条件是：if ($(this).parent().hasClass('disabled')) ..。

@im1dermike 我不明白我为什么要这样做？

老问题，但这是我发现的，所以我添加了这个。您会进行该检查，因为 li 会改变用户的视觉效果，因此应该具有 disabled 类。

【参考方案17】：

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

禁用状态

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

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

【讨论】：

这是主要功能之一，令我震惊的是它尚未实现

在v3中实现

可以，但是链接仍然可以点击。

没错，目前可行的解决方案是删除 data-toggle 属性。