你可以禁用Bootstrap中的标签？
你可以禁用Bootstrap 2.0中的标签，就像你可以禁用button？
您可以从选项卡中删除data-toggle="tab"属性，因为它使用实时/委托事件进行连接
从2.1开始，你可以从http://twitter.github.com/bootstrap/components.html#navs的引导文档中find。;
禁用状态
对于任何导航组件（选项卡，药片或列表），添加.disabled灰色链接和没有hover效果。 除非您删除href属性，否则链接将保持可点击。 或者，您可以实施自定义JavaScript以防止这些点击。
有关function添加讨论，请参阅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; } });
我认为最好的解决scheme是禁用CSS。 你定义一个新的类，并closures它的鼠标事件：
.disabledTab{ pointer-events: none; }
然后你将这个类分配给所需的li元素：
<li class="disabled disabledTab"><a href="#"> .... </a></li>
您也可以使用jQuery添加/删除类。 例如，要禁用所有选项卡：
$("ul.nav li").removeClass('active').addClass('disabledTab');
这里是一个例子： jsFiddle
另外，我正在使用以下解决scheme：
$('a[data-toggle="tab"]').on('click', function(){ if ($(this).parent('li').hasClass('disabled')) { return false; }; });
现在你只要将类“禁用”添加到父李和标签不工作，并成为灰色。
老问题，但它有点指向我在正确的方向。 我去的方法是将禁用的类添加到李，然后将下面的代码添加到我的Javascript文件。
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) { e.stopImmediatePropagation(); });
这将禁用li有一类禁用的任何链接。 有点类似totas的答案，但它不会运行，如果每次用户点击任何标签链接，它不使用返回false。
希望对别人有用！
对于我的使用，最好的解决scheme是这里的一些答案的组合，它们是：
- 将
disabled类添加到li我想要禁用 -
加这个JS：
`$(".nav .disabled>a").on("click", function(e) { e.preventDefault(); return false; });` -
你甚至可以删除data-toggle =“tab”属性，如果你想让Bootstrap不干涉你的代码。
**** NOTE **：**这里的JS代码很重要，即使你删除了数据切换，否则它会通过添加#your-id值来更新你的URL，这是不推荐的，因为你的标签被禁用，因此不应该被访问。
无需任何JQuery，只需一行CSS
.nav-tabs li.disabled a { pointer-events: none; }
除了詹姆斯的回答：
如果您需要禁用链接使用
$('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');
只有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>
假设，这是你的TAB，你想禁用它
<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>
所以你也可以通过添加dynamicCSS来禁用这个选项卡
$('#groups').css('pointer-events', 'none')
我尝试了所有build议的答案，但最后我做了这样的工作
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'); });
没有答案为我工作。 从a中删除data-toggle="tab"可防止选项卡激活，但也会将#tabId哈希值添加到URL中。 这是我无法接受的。 什么也是不能接受的是使用JavaScript。
什么工作是将disabled类添加到li并删除其中包含a的href属性。
我的标签在面板中，所以我添加了一个class ='禁用'的标签锚点
在JavaScript中我补充说：
$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) { if ($(this).hasClass('disabled')){ e.preventDefault(); return false; } })
并在更less的介绍我补充说：
.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; } } } }
最简单和干净的解决scheme是避免添加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目标附加ex页。page.apsx#Home - 无需为
"disabled"<li>"disabled"添加"disabled"类并删除href
这是我的尝试。 禁用标签：
- 将“禁用”类添加到选项卡的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);
