web-dev-qa-db-ja.com

Bootstrapでタブを無効にできますか？

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

javascriptcsstwitter-bootstraptwitter-bootstrap-2
128
arbme

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

179
Betty

2.1では、 http://Twitter.github.com/bootstrap/components.html#navs のbootstrapドキュメントから、次のことができます。

無効状態

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

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

46
Scott Stafford

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

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

私は最善の解決策はCSSを無効にすることだと思います。新しいクラスを定義し、そのクラスでマウスイベントをオフにします。

.disabledTab{
    pointer-events: none;
}

そして、このクラスを目的のli要素に割り当てます。

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

JQueryを使用してクラスを追加/削除することもできます。たとえば、すべてのタブを無効にするには：

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

以下に例を示します。 jsFiddle

19
Zsolt Tolvaly

JQueryは不要、1行だけのCSS

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

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

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

これで、クラス「無効」を親liに追加しただけで、タブが機能せず、灰色になります。

9
akopichin

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

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

これにより、liのクラスが無効になっているリンクが無効になります。 totasの答えに似ていますが、ユーザーがタブリンクをクリックするたびにfalseを返すと実行されません。

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

6
James

私が使用するための最良の解決策は、以下の回答のいくつかを組み合わせることでした：

  • 無効にするliにdisabledクラスを追加する

  • このJSを追加します。

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

  • Bootstrapがコードにまったく干渉しないようにする場合は、data-toggle = "tab"属性を削除することもできます。

****注**：**ここでJSコードは重要です。データトグルを削除しても、#your-id値を追加してURLを更新しますが、これはタブが無効になっているためお勧めしません、したがってアクセスしないでください。

6
Cyril N.

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>
3
George Siggouroglou

これがあなたの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')
2
Vinaysingh Khetwal

ジェームズの答えに加えて：

リンクの使用を無効にする必要がある場合

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

私のタブはパネルにあったので、タブのアンカーに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;
            }
        }
    }
}
0
pgee70

これを回避する最も簡単でクリーンなソリューションは、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 page.apsx#Homeのhrefターゲットを追加します
  • "disabled"クラスを<li>に追加し、hrefを削除する必要はありません
0
Gaurravs

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

動作するのは、disabledクラスをliに追加し、含まれるhrefのa属性を削除することです。

0
im1dermike

私はすべての提案された答えを試しましたが、最終的に私はそれをこのように動作させました

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');
});
0
Abou-Emish