Pouvez-vous désactiver les onglets dans Bootstrap?

Pouvez-vous désactiver les onglets dans Bootstrap 2.0 comme vous pouvez désactiver les boutons?

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

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

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

Pas besoin de Jquery, juste une ligne CSS

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

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.

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:

• 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é.

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

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>

• 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

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:

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