回答:
data-toggle="tab"ライブ/デリゲートイベントを使用して接続されているため、タブから属性を削除できます
class="disabled"期待通りに動作します.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
2.1以降では、http：//twitter.github.com/bootstrap/components.html#navsにあるブートストラップのドキュメントから、これを行うことができます。
無効状態
ナビゲーションコンポーネント（タブ、ピル、またはリスト）の場合、灰色のリンクに.disabledを追加し、ホバー効果なし。ただし、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;
}
});disabledクラスを追加してから、liチェックする条件が次のようになることを除いて、指定したJavaScriptを追加する必要がありますif ($(this).parent().hasClass('disabled')) {..}。
liはユーザーのビジュアルを変更するものであり、結果としてdisabledクラスが持つべきものだからです。
私は最良の解決策は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を使用しません。
うまくいけば、誰かに役立つでしょう！
私の使用にとって、最良の解決策は、ここでのいくつかの答えの組み合わせでした：
disabled無効にするliにクラスをするJSのこの部分を追加します。
`$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});`Bootstrapがコードにまったく干渉しないようにする場合は、data-toggle = "tab"属性を削除することもできます。
****注**：**ここのJSコードは重要です。データトグルを削除した場合でも、そうしないと、#your-id値が追加されてURLが更新されます。これは、タブが無効になっているためお勧めできません。したがって、アクセスすべきではありません。
のみ、CSS、次の2つの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>これがあなたのタブであり、それを無効にしたいとします
<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>そのため、動的CSSを追加してこのタブを無効にすることもできます
$('#groups').css('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');提案されたすべての回答を試しましたが、最終的にはこのように機能させました
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');
});答えはどれもうまくいきません。data-toggle="tab"から削除aすると、タブがアクティブ化されなくなりますが、#tabId、URLにハッシュがれます。それは私には受け入れられません。また、JavaScriptを使用することもできません。
機能するのは、disabledクラスをに追加し、それを含むの属性をli削除することhrefですa。
タブがパネルにあったので、タブアンカーに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>"cursor:no-drop;"と、カーソルは無効になっているように見えますが、クリック可能です。URLには、exのhrefターゲットが追加されます。page.apsx#Home"disabled"クラスを追加したり<li>削除したりする必要はありませんhref 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>これが私の試みです。タブを無効にするには：
コード：
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);