Pouvez-vous désactiver les onglets dans Bootstrap?

Vous pouvez supprimer l'attribut

data-toggle="tab"

de l'onglet, comme il est connecté en utilisant des événements live / delegate

Commençant par 2.1 ans, de la documentation bootstrap par l'adresse
http://twitter.github.com/boot ... 3navs
, Tu peux.

État handicapé

Pour tout composant de navigation /Onglets, tablettes ou liste/ Ajouter .disabled Gris
Liens et aucun effet de guidage. Cependant, les liens resteront clicables,
Si vous ne supprimez pas l'attribut href. De plus, vous pouvez
Implémenter coutume JavaScript, Pour empêcher ces clics.

Cm
https://github.com/twitter/bootstrap/issues/2764
https://github.com/twitter/bootstrap/issues/2764 Pour discuter de l'ajout de la fonction.

J'ai ajouté ce qui suit Javascript Pour empêcher les liens avec des références physiques limitées :

$/".nav-tabs a[data-toggle=tab]"/.on/"click", function/e/ {

 if /$/this/.hasClass/"disabled"// {

 e.preventDefault//;

 return false;

 }

}/;

Je pense que la meilleure solution est l'arrêt avec css.
Vous définissez une nouvelle classe et désactiver des événements de souris de classe:

.disabledTab{

 pointer-events: none;

}

Et puis vous attribuez cette classe à l'élément souhaité li:

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

Vous pouvez également ajouter/Supprimer la classe en utilisant jQuery. Par exemple, pour désactiver tous les onglets:

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

Voici un exemple:
http://jsfiddle.net/LJnn7/1/

Ce n'est pas nécessaire Jquery, Une seule ligne CSS

.nav-tabs li.disabled a {

 pointer-events: none;

}

De plus, j'utilise la solution suivante:

$/'a[data-toggle="tab"]'/.on/'click', function//{

 if /$/this/.parent/'li'/.hasClass/'disabled'// {

 return false;

 };

}/;

Maintenant tu ajouts juste classe 'disabled' Aux parents li, Et l'onglet ne fonctionne pas et devient gris.

Vieille question, mais il semble être la bonne direction pour moi. La méthode que j'ai choisie était d'ajouter une classe déconnectée dans li, puis ajoutez le code suivant dans mon fichier Javascript.

$/'.nav-tabs li.disabled > a[data-toggle=tab]'/.on/'click', function/e/ {

 e.stopImmediatePropagation//;

}/;

Il fera désactiver tout lien où li A une classe disabled. Quelque chose comme la réponse de Totas, mais il ne courra pas if Chaque fois que l'utilisateur clique sur n'importe quel onglet de l'onglet et qu'il n'utilise pas return false.

J'espère que cela est utile à quelqu'un!

Pour mon utilisation, la meilleure solution était une combinaison de réponses ici, qui sont :

Ajouter une classe

disabled

dans li, que je veux désactiver

Ajouter cette pièce JS :

`$/".nav .disabled>a"/.on/"click", function/e/ {

 e.preventDefault//;

 return false;

 }/;`

Vous pouvez même supprimer l'attribut data-toggle="tab", Si tu veux Bootstrap Pas intervenu du tout dans votre code.

****NOTE**:** le code JS ici est important, même si vous supprimez le commutateur de données, car sinon, il mettra à jour votre URL, en ajoutant

#your-id

, Ce qui n'est pas recommandé, car votre onglet est désactivé et, par conséquent, ne doit pas être disponible.

Ayant

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

Ceci est un modèle html. La seule chose dont vous avez besoin - Ceci est une classe pour installer l'élément de liste dont vous avez besoin.

<ul class="nav nav-tabs tab-header">

<li>

<a data-toggle="tab" href="#tab-info">Info</a>

</li>

<li class="disabledTab">

<a data-toggle="tab" href="#tab-date">Date</a>

</li>

<li>

<a data-toggle="tab" href="#tab-photo">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 vous voulez le désactiver

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

Afin que vous puissiez également désactiver cet onglet en ajoutant dynamic css

$/'#groups'/.css/'pointer-events', 'none'/

En plus de la réponse de James:

Si vous avez besoin de désactiver le lien

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

Si vous avez besoin d'empêcher le téléchargement d'un lien désactivé sur l'onglet

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



 if/$this.hasClass/"disabled"//{



 e.preventDefault//;



 e.stopPropagation//;



 e.stopImmediatePropagation//;



 return false;



 }

}

Si vous avez besoin de suivre le lien

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

Aucune des réponses ne fonctionne pour moi. Suppression

data-toggle="tab"

de

a

Empêche l'activation de l'onglet, mais ajoute également

#tabId

hash à URL. C'est inacceptable pour moi. Qui est également inacceptable donc cette utilisation javascript.

Ce qui fonctionne vraiment, c'est ajouter une classe

disabled

à

li

Et supprimer un attribut

href

De ses contenant

a

.

J'ai essayé toutes les réponses offertes, mais à la fin je suis 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'/;

}/;

Mes onglets étaient dans les panneaux, donc j'ai ajouté Class = 'désactivé' à l'ancre des onglets

dans 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 plus petite quantité, 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 décision la plus simple et la seule décision de l'éviter, - C'est ajouter une balise

onclick="return false;"

Taguer

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>

Une addition

"cursor:no-drop;"

Rend le curseur déconnecté, mais

Cliquable

, Url obtient d'ajouter à href pour ex

page.apsx#Home

Pas besoin d'ajouter classe

"disabled"

à la classe

<li>

AND, Enlever la classe

href

</li>

Vous pouvez désactiver l'onglet dans bootstrap 4, Classe ajoutée

disabled

À l'élément de fille nav-item de la manière suivante

<li class="nav-item">

<a aria-expanded="false" class="nav-link disabled" data-toggle="tab" href="#messages7" role="tab">

<i class="icofont icofont-ui-message"></i>Home</a>

<div class="slide"></div>

</li>

Voici ma tentative. Pour désactiver l'onglet:

Ajouter une classe "disabled" à la classe LI onglets;

Supprimer l'attribut 'data-toggle' de LI > A;

Supprimer l'événement 'click' sur LI > A.

Le 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/;