Pouvez-vous désactiver les onglets dans Bootstrap?


Réponses:


188

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


11
Merci a travaillé un régal, a également ajouté css "curseur: no-drop;" pour le curseur, donc l'utilisation sait pourquoi ils ne peuvent pas cliquer dessus
arbme

23
curseur: non autorisé; est plus approprié dans ce cas. Sauf si vous effectuez un glisser-déposer.
Christophe Geers

9
Ou ajouter une classe désactivée à la li
Pencilcheck

6
Vous devez utiliser les deux suggestions ci-dessus: Ajouter une classe "désactivée" à <li> ET supprimer l'attribut data-toogle ou href de l'onglet
Scabbia

9
J'ai simplement ajouté ce CSS et class="disabled"fonctionne maintenant comme prévu.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
vigueur le

49

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.


1
c'est l'une des principales fonctionnalités et ça me déroute, il n'est pas encore implémenté
DS_web_developer

Il est implémenté en v3
Jeroen K

8
Oui mais les liens sont toujours cliquables.
svlada

3
Jusqu'à présent, la solution viable consiste à supprimer l'attribut data-toggle.
Cyril N.,

34

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

9
Je pense qu'une combinaison de cela et de la réponse de @ hotzu devrait être la réponse. Vous devez ajouter la disabledclasse à 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')) {..}.
im1dermike

@ im1dermike Je ne vois pas pourquoi je ferais ça?
totas le

Ancienne question, mais c'est ce que j'ai trouvé alors j'ajoute ceci. Vous feriez cette vérification parce que lic'est ce qui change les visuels pour l'utilisateur et c'est par conséquent ce qui devrait avoir la disabledclasse.
Jared

23

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


thnx @hotzu u m'a rendu la journée facile .. :)
Gaurav Singh

je déconseille fortement cela. car une solution css uniquement laisse les onglets cliquables. au cas où d'autres événements écoutent ces clics, ils seront exécutés, ce qui n'est pas le résultat souhaité. (Je suppose?)
Dementic

Dans mon cas, cela a fait l'affaire. J'ai construit un formulaire composé de plusieurs onglets. Aller à l'onglet suivant se fait via un bouton, qui déclenche un clic-événement sur l'onglet pour aller. Donc, désactiver complètement les clics n'est pas une option pour moi, mais supprimer les événements de pointeur des onglets était exactement ce dont j'avais besoin.
sebastian

17

Pas besoin de Jquery, juste une ligne CSS

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

1
Je devais le faire sur li.disabled (pas li.disabled a)
Daniel

10

En outre, j'utilise la solution suivante:

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

Maintenant, vous ajoutez simplement la classe «désactivé» au li et l'onglet parent ne fonctionne pas et devient gris.


6

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!


1
bien! mais besoin de e.preventDefault () avant e.stopImmediatePropagation ()
meuwka

6

Pour mon utilisation, la meilleure solution était un mélange de certaines des réponses ici, qui sont:

  • Ajout de la disabledclasse au li que je veux désactiver
  • Ajoutez 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-idvaleur, ce qui n'est pas recommandé car votre onglet est désactivé, ne doit donc pas être consulté.


4

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>

2

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

1

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

0

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

0

Aucune des réponses ne fonctionne pour moi. Supprimer data-toggle="tab"du aempê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 disabledclasse au liet la suppression de l' hrefattribut de son conteneur a.


Maintenant que j'ai lu plus loin, c'est aussi fondamentalement la même réponse exacte que celle de @Scott Stafford, qui y a répondu 2 ans plus tôt ...
Jim

0

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

0

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>
  • L'ajout "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
  • Pas besoin d'ajouter une "disabled"classe à <li>ET de supprimerhref

0

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>

-1

Voici ma tentative. Pour désactiver un onglet:

  1. Ajouter la classe "désactivé" au LI de l'onglet;
  2. Supprimer l'attribut 'data-toggle' de LI> A;
  3. Supprimez l'événement 'clic' sur LI> A.

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);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.