Réponses:
Vous pouvez supprimer l' data-toggle="tab"
attribut de l'onglet car il est connecté à l'aide d'événements en direct / déléguer
class="disabled"
fonctionne maintenant comme prévu.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
Depuis la version 2.1, à partir de la documentation de bootstrap à http://twitter.github.com/bootstrap/components.html#navs , vous pouvez.
État désactivé
Pour tout composant de navigation (onglets, pilules ou liste), ajoutez .disabled pour les liens gris et aucun effet de survol. Cependant, les liens resteront cliquables, sauf si vous supprimez l'attribut href. Vous pouvez également implémenter un JavaScript personnalisé pour empêcher ces clics.
Voir https://github.com/twitter/bootstrap/issues/2764 pour la discussion sur l'ajout de fonctionnalités.
J'ai ajouté le Javascript suivant pour éviter les clics sur les liens désactivés:
$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
if ($(this).hasClass("disabled")) {
e.preventDefault();
return false;
}
});
disabled
classe à l' li
élément puis ajoutez le javascript que vous avez spécifié , sauf la condition que vous seriez Analysant serait: if ($(this).parent().hasClass('disabled')) {..}
.
li
c'est ce qui change les visuels pour l'utilisateur et c'est par conséquent ce qui devrait avoir la disabled
classe.
je pense que la meilleure solution est de désactiver avec css. Vous définissez une nouvelle classe et vous désactivez les événements de souris dessus:
.disabledTab{
pointer-events: none;
}
Et puis vous affectez cette classe à l'élément li souhaité:
<li class="disabled disabledTab"><a href="#"> .... </a></li>
Vous pouvez également ajouter / supprimer la classe avec jQuery. Par exemple, pour désactiver tous les onglets:
$("ul.nav li").removeClass('active').addClass('disabledTab');
Voici un exemple: jsFiddle
.nav-tabs li.disabled a {
pointer-events: none;
}
Ancienne question mais elle m'a en quelque sorte orientée dans la bonne direction. La méthode que j'ai choisie était d'ajouter la classe désactivée au li, puis d'ajouter le code suivant à mon fichier Javascript.
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
e.stopImmediatePropagation();
});
Cela désactivera tout lien où le li a une classe de désactivé. Un peu similaire à la réponse de totas, mais il ne fonctionnera pas si chaque fois qu'un utilisateur clique sur un lien d'onglet et qu'il n'utilise pas return false.
J'espère que cela sera utile à quelqu'un!
Pour mon utilisation, la meilleure solution était un mélange de certaines des réponses ici, qui sont:
disabled
classe au li que je veux désactiverAjoutez ce morceau de JS:
`$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});`
Vous pouvez même supprimer l'attribut data-toggle = "tab" si vous voulez que Bootstrap n'interfère pas du tout avec votre code.
**** REMARQUE **: ** Le code JS ici est important, même si vous supprimez la bascule de données car sinon, il mettra à jour votre URL en y ajoutant la #your-id
valeur, ce qui n'est pas recommandé car votre onglet est désactivé, ne doit donc pas être consulté.
Avec uniquement css , vous pouvez définir deux classes 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>
Il s'agit d'un modèle html. La seule chose nécessaire est de définir la classe sur votre élément de liste préféré.
<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>
Supposons que ce soit votre TAB et que vous souhaitiez le désactiver
<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>
Vous pouvez donc également désactiver cet onglet en ajoutant du CSS dynamique
$('#groups').css('pointer-events', 'none')
En plus de la réponse de James:
Si vous devez désactiver l'utilisation du lien
$('a[data-toggle="tab"]').addClass('disabled');
Si vous devez empêcher un lien désactivé de charger l'onglet
$('a[data-toggle="tab"]').click(function(e){
if($this.hasClass("disabled")){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}
Si vous ne pouvez pas le lien
$('a[data-toggle="tab"]').removeClass('disabled');
J'ai essayé toutes les réponses suggérées, mais finalement je l'ai fait fonctionner comme ça
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');
});
Aucune des réponses ne fonctionne pour moi. Supprimer data-toggle="tab"
du a
empêche l'activation de l'onglet, mais ajoute également le#tabId
hachage à l'URL. Cela m'est inacceptable. Ce qui est également inacceptable, c'est l'utilisation de javascript.
Ce qui fonctionne est l'ajout de la disabled
classe au li
et la suppression de l' href
attribut de son conteneur a
.
mes onglets étaient dans des panneaux, j'ai donc ajouté un class = 'disabled' à l'ancre des onglets
en javascript j'ai ajouté:
$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
if ($(this).hasClass('disabled')){
e.preventDefault();
return false;
}
})
et pour la présentation en moins j'ai ajouté:
.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;
}
}
}
}
La solution la plus simple et la plus propre pour éviter cela consiste à ajouter onclick="return false;"
une a
étiquette.
<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;"
rend simplement le curseur désactivé, mais il est cliquable , l'URL est ajoutée avec la cible href par expage.apsx#Home
"disabled"
classe à <li>
ET de supprimerhref
Vous pouvez désactiver un onglet dans bootstrap 4 en ajoutant une classe disabled
à l'enfant de nav-item comme suit
<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>
Voici ma tentative. Pour désactiver un onglet:
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);