it-swarm.com.de

Können Sie Tabs in Bootstrap deaktivieren?

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

124
arbme

Sie können das data-toggle="tab"-Attribut aus der Registerkarte entfernen, wenn es mit Live-/Delegierungsereignissen verbunden ist

176
Betty

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

Deaktivierter Zustand

Fügen Sie für eine beliebige Nav-Komponente (Registerkarten, Pillen oder Liste) .disabled für graue .__ hinzu. Links und keine Hover-Effekte. Links bleiben anklickbar, jedoch Es sei denn, Sie entfernen das Href-Attribut. Alternativ können Sie auch Implementieren Sie benutzerdefiniertes JavaScript, um diese Klicks zu verhindern.

Unter https://github.com/Twitter/bootstrap/issues/2764 finden Sie Informationen zum Hinzufügen von Features.

43
Scott Stafford

Ich habe folgendes 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;
  }
});
33
totas

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

18
Zsolt Tolvaly

Kein Bedarf an Jquery, nur eine Zeile CSS

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

Außerdem verwende ich folgende Lösung:

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

Nun fügen Sie der übergeordneten Li und der Registerkarte nur die Klasse "disabled" hinzu und funktionieren nicht mehr und werden grau.

9
akopichin

Alte Frage, aber es zeigte mir irgendwie in die richtige Richtung. Die Methode, für die ich ging, 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. Diese Antwort ähnelt der Antwort von totas, wird jedoch nicht ausgeführt, wenn ein Benutzer jedes Mal auf einen Tab-Link klickt und return false nicht verwendet.

Hoffentlich wird es für jemanden nützlich sein!

6
James

Für meinen Einsatz war die beste Lösung eine Mischung aus einigen Antworten, die hier aufgeführt sind:

  • Hinzufügen der disabled-Klasse zum li, den ich deaktivieren möchte
  • Dieses Stück JS hinzufügen:

       `$(".nav .disabled>a").on("click", function(e) {
            e.preventDefault();
            return false;
        });`
    
  • Sie können das Attribut data-toggle = "tab" sogar entfernen, wenn Bootstrap überhaupt nicht in Ihren Code eingreifen soll.

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

6
Cyril N.

Mitonly csskö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 Ihren bevorzugten Listeneintrag setzen.

<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

Angenommen, dies ist Ihre TAB und Sie möchten sie deaktivieren

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

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

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

Neben 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 finden müssen

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

meine Registerkarten befanden sich in Panels. Daher fügte ich dem Anker der Registerkarten eine Klasse = 'disabled' hinzu

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 zur 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;
            }
        }
    }
}
0
pgee70

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

<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>
  • Durch das Hinzufügen von "cursor:no-drop;" wird der Cursor nur deaktiviert, aber mit clickable wird Url mit href target für ex page.apsx#Home angehängt
  • Es ist nicht notwendig, "disabled"-Klasse zu <li> hinzuzufügen UND href zu entfernen. 
0
Gaurravs

Keine der Antworten funktioniert für mich. Entfernen Sie data-toggle="tab" aus der a verhindert die Aktivierung der Registerkarte, fügt jedoch auch den #tabId-Hash der URL hinzu. Das ist für mich nicht akzeptabel. Was auch inakzeptabel ist, ist die Verwendung von Javascript.

Was funktioniert, ist, die disabled-Klasse der li hinzuzufügen und das href-Attribut des darin enthaltenen a zu entfernen.

0
im1dermike

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