Antworten:
Sie können das data-toggle="tab"
Attribut von der Registerkarte entfernen, wenn es über Live- / Delegate-Ereignisse verbunden ist
class="disabled"
funktioniert jetzt wie erwartet.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
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;
}
});
disabled
Klasse zum li
Element hinzufügen und dann das von Ihnen angegebene Javascript hinzufügen, mit Ausnahme der Bedingung, gegen die Sie prüfen würden : if ($(this).parent().hasClass('disabled')) {..}
.
li
Grafik für den Benutzer ändert und folglich die disabled
Klasse haben sollte.
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
.nav-tabs li.disabled a {
pointer-events: none;
}
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:
disabled
Klasse zu dem Li, das ich deaktivieren möchteFü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-id
Werts 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 a
verhindert, dass die Registerkarte aktiviert wird, fügt aber auch den #tabId
Hash 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 disabled
Klasse zum li
und Entfernen des href
Attributs 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 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>
"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
"disabled"
Klassen zu <li>
AND ist nicht erforderlichhref
Sie können eine Registerkarte in Bootstrap 4 deaktivieren, indem Sie disabled
dem 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:
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);