你能在引导程序中禁用标签吗？

小开

最佳答案

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

小开

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

残疾状态

对于任何导航组件(制表符、药片或列表) ，添加链接，没有悬停效果。链接仍然可以点击，但是, 除非您删除 href 属性实现定制的 JavaScript 来防止这些单击。

有关特性添加的讨论，请参见 https://github.com/twitter/bootstrap/issues/2764。

小开

我添加了以下 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>

你也可以使用 jQuery 来添加/删除这个类。例如，禁用所有的制表符:

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

这里有一个例子: JsFiddle

小开

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

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

这将禁用 li 具有禁用类的任何链接。有点类似于 totas 的回答，但是它不会在每次用户单击任何选项卡链接时运行 if，并且不使用 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").on("click", function(e) {
e.preventDefault();
return false;
});

如果希望 Bootstrap 根本不干扰代码，甚至可以删除 data-toggle = “ tab”属性。

注意 : 这里的 JS 代码很重要，即使你删除了数据切换，否则它会通过添加 #your-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;
};
});

现在你只是添加类“残疾人”到父李和制表符不工作，并成为灰色。

小开

这是我的尝试。禁用一个标签:

将“禁用”类添加到选项卡的 LI;
从 LI > A 中删除“ data-toggle”属性;
在 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);

小开

除了詹姆斯的回答:

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

$('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 = ‘ disable’

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

添加 "cursor:no-drop;"只会使光标看起来禁用，但是如果是 可以点击，Url 将与前 page.apsx#Home的 href 目标一起附加
不需要添加 "disabled"类到 <li>和删除 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>

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

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

小开

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

小开

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