142

ボタンを無効にするのと同じように、Bootstrap 2.0でタブを無効にできますか？

4

17 に答える 17

196

data-toggle="tab"ライブ/デリゲートイベントを使用して接続されているため、タブから属性を削除できます

于 2012-02-11T02:35:46.557 に答える
51

2.1 の時点で、http://twitter.github.com/bootstrap/components.html#navsのブートストラップ ドキュメントから、次のことができます。

無効状態

任意のナビゲーション コンポーネント (タブ、ピル、またはリスト) については、グレーのリンクとホバー効果なしの .disabled を追加します。ただし、href 属性を削除しない限り、リンクは引き続きクリック可能です。または、カスタム JavaScript を実装して、これらのクリックを防止することもできます。

機能追加の説明については、https://github.com/twitter/bootstrap/issues/2764を参照してください。

于 2012-12-07T22:10:24.400 に答える
37

無効なリンクのクリックを防ぐために、次の Javascript を追加しました。

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});
于 2013-12-04T15:28:01.787 に答える
11

また、次のソリューションを使用しています。

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

ここで、クラス 'disabled' を親の li に追加するだけで、タブが機能せず、灰色になります。

于 2015-01-26T13:51:05.427 に答える
6

古い質問ですが、それは私を正しい方向に向けてくれました。私が行った方法は、無効なクラスをliに追加してから、次のコードをJavascriptファイルに追加することでした。

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

これにより、li のクラスが無効になっているすべてのリンクが無効になります。totasの回答に似ていますが、ユーザーがタブリンクをクリックするたびにifを実行せず、return falseを使用しません。

うまくいけば、それは誰かに役立つでしょう！

于 2014-08-28T10:04:48.913 に答える
5

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>
于 2017-01-11T11:56:26.790 に答える
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');
于 2016-05-07T17:46:31.100 に答える
0

私のタブはパネルにあったので、タブアンカーに class='disabled' を追加しました

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;
            }
        }
    }
}
于 2016-08-02T05:03:54.720 に答える
0

答えはどれも私にとってはうまくいきません。data-toggle="tab"から削除aすると、タブがアクティブ化されなくなりますが#tabId、URL にハッシュが追加されます。それは私には受け入れられません。受け入れられないのは、javascript の使用です。

disabled何が機能するかは、クラスを に追加し、それを含む の属性をli削除することです。hrefa

于 2014-11-06T18:57:11.833 に答える
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には、ex の href ターゲットが追加されます。page.apsx#Home
  • AND 削除に"disabled"クラスを追加する必要はありません<li>href
于 2016-08-30T10:16:31.463 に答える
-1

これが私の試みです。タブを無効にするには:

  1. タブの LI に「無効」クラスを追加します。
  2. LI > A から「data-toggle」属性を削除します。
  3. 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);
于 2015-10-30T00:16:15.693 に答える