Pouvez-vous désactiver les onglets dans Bootstrap?

Pouvez-vous désactiver les onglets dans Bootstrap 2.0, Comment pouvez-vous éteindre les boutons?
Invité:

Corneille

Confirmation de:

Vous pouvez supprimer l'attribut
data-toggle="tab"

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

Georges

Confirmation de:

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.

Gregoire

Confirmation de:

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

Gregoire

Confirmation de:

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/

Francois

Confirmation de:

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


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

Daniel

Confirmation de:

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.

Felix

Confirmation de:

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!

Gabriel

Confirmation de:

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.

Charles

Confirmation de:

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>

Agathe

Confirmation de:

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

Denis

Confirmation de:

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

Florian

Confirmation de:

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

.

Alice

Confirmation de:

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

Hannah

Confirmation de:

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

Gaspard

Confirmation de:

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>

Catherine

Confirmation de:

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>

Georges

Confirmation de:

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

Pour répondre aux questions, connectez-vous ou registre