Können Sie Registerkarten in Bootstrap deaktivieren?

Können Sie Registerkarten in Bootstrap 2.0 so deaktivieren, wie Sie Schaltflächen deaktivieren können?

Sie können das data-toggle="tab"Attribut von der Registerkarte entfernen, wenn es über Live- / Delegate-Ereignisse verbunden ist

Ab 2.1 können Sie aus der Bootstrap-Dokumentation unter http://twitter.github.com/bootstrap/components.html#navs .

Deaktivierter Status

Fügen Sie für jede Navigationskomponente (Registerkarten, Pillen oder Listen) .disabled für graue Links und keine Hover-Effekte hinzu. Links bleiben jedoch anklickbar, es sei denn, Sie entfernen das href-Attribut. Alternativ können Sie benutzerdefiniertes JavaScript implementieren, um diese Klicks zu verhindern.

Weitere Informationen zum Hinzufügen von Funktionen finden Sie unter https://github.com/twitter/bootstrap/issues/2764 .

Ich habe das folgende Javascript hinzugefügt, um Klicks auf deaktivierte Links zu verhindern:

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

Ich denke, die beste Lösung ist das Deaktivieren mit CSS. Sie definieren eine neue Klasse und deaktivieren die Mausereignisse darauf:

.disabledTab{
    pointer-events: none;
}

Und dann ordnen Sie diese Klasse dem gewünschten li-Element zu:

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

Sie können die Klasse auch mit jQuery hinzufügen / entfernen. So deaktivieren Sie beispielsweise alle Registerkarten:

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

Hier ist ein Beispiel: jsFiddle

Keine Notwendigkeit, nur einzeiliges CSS

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

Außerdem verwende ich folgende Lösung:

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

Jetzt fügt das Hinzufügen der Klasse 'disabled' zum übergeordneten li und tab nicht mehr hinzu und wird grau.

Alte Frage, aber sie hat mich irgendwie in die richtige Richtung gelenkt. Die Methode, für die ich mich entschieden habe, bestand darin, die deaktivierte Klasse zum li hinzuzufügen und dann den folgenden Code zu meiner Javascript-Datei hinzuzufügen.

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

Dadurch wird jeder Link deaktiviert, bei dem die Klasse li deaktiviert ist. Ähnlich wie die Antwort von totas, aber es wird nicht ausgeführt, wenn ein Benutzer jedes Mal auf einen Tab-Link klickt und return false nicht verwendet.

Hoffentlich wird es jemandem nützlich sein!

Für mich war die beste Lösung eine Mischung aus einigen der Antworten hier:

• Hinzufügen der disabledKlasse zu dem Li, das ich deaktivieren möchte

• Fügen Sie dieses Stück JS hinzu:

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

• Sie können sogar das Attribut data-toggle = "tab" entfernen, wenn Bootstrap Ihren Code überhaupt nicht stören soll.

**** HINWEIS **: ** Der JS-Code hier ist wichtig, auch wenn Sie die Datenumschaltung entfernen, da sonst Ihre URL durch Hinzufügen des #your-idWerts aktualisiert wird. Dies wird nicht empfohlen, da Ihre Registerkarte deaktiviert ist. daher sollte nicht zugegriffen werden.

Mit nur CSS können Sie zwei CSS-Klassen definieren.

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

Dies ist eine HTML-Vorlage. Sie müssen lediglich die Klasse auf Ihr bevorzugtes Listenelement festlegen.

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

Angenommen, dies ist Ihr TAB und Sie möchten es deaktivieren

<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>

Sie können diese Registerkarte also auch deaktivieren, indem Sie dynamisches CSS hinzufügen

$('#groups').css('pointer-events', 'none')

Zusätzlich zu James 'Antwort:

Wenn Sie den Link deaktivieren müssen, verwenden Sie

$('a[data-toggle="tab"]').addClass('disabled');

Wenn Sie verhindern möchten, dass ein deaktivierter Link die Registerkarte lädt

$('a[data-toggle="tab"]').click(function(e){

            if($this.hasClass("disabled")){

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Wenn Sie den Link nicht aktivieren können

$('a[data-toggle="tab"]').removeClass('disabled');

Ich habe alle vorgeschlagenen Antworten ausprobiert, aber schließlich habe ich es so gemacht

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

Keine der Antworten funktioniert für mich. Entfernen data-toggle="tab"von averhindert, dass die Registerkarte aktiviert wird, fügt aber auch den #tabIdHash zur URL hinzu. Das ist für mich inakzeptabel. Was auch nicht akzeptabel ist, ist die Verwendung von Javascript.

Was funktioniert, ist das Hinzufügen der disabledKlasse zum liund Entfernen des hrefAttributs des enthaltenen a.

Meine Registerkarten befanden sich in Bedienfeldern, daher habe ich dem Registerkartenanker eine Klasse = 'deaktiviert' hinzugefügt

in javascript habe ich hinzugefügt:

$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    if ($(this).hasClass('disabled')){
        e.preventDefault();
        return false;
    }
})

und für die Präsentation in weniger habe ich hinzugefügt:

.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;
            }
        }
    }
}

Die einfachste und sauberste Lösung, um dies zu vermeiden, ist das Hinzufügen onclick="return false;"zum aTag.

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

• Das Hinzufügen "cursor:no-drop;"lässt den Cursor nur deaktiviert aussehen, ist aber anklickbar . Die URL wird zum Beispiel mit dem href-Ziel angehängtpage.apsx#Home
• Das Hinzufügen und Entfernen von "disabled"Klassen zu <li>AND ist nicht erforderlichhref

Sie können eine Registerkarte in Bootstrap 4 deaktivieren, indem Sie disableddem untergeordneten Element von nav-item wie folgt eine Klasse hinzufügen

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

Hier ist mein Versuch. So deaktivieren Sie eine Registerkarte:

1. Fügen Sie der LI des Tabs die Klasse "disabled" hinzu.
2. Entfernen Sie das Attribut 'data-toggle' aus LI> A;
3. Unterdrücken Sie das Klickereignis auf LI> A.

Code:

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);