web-dev-qa-db-fra.com

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?

javascriptcsstwitter-bootstraptwitter-bootstrap-2
124
arbme

Vous pouvez supprimer l'attribut data-toggle="tab" de l'onglet lorsqu'il est connecté à l'aide d'événements live/delegate

176
Betty

À partir de la version 2.1, à partir de la documentation d'amorçage à http://Twitter.github.com/bootstrap/components.html#navs , vous pouvez.

État désactivé

Pour tout composant de navigation (onglets, pilules ou liste), ajoutez .disabled en gris liens et pas d'effets de survol. Les liens resteront cliquables, cependant.. sauf si vous supprimez l'attribut href. Alternativement, vous pouvez implémentez du code JavaScript personnalisé pour empêcher ces clics.

Voir https://github.com/Twitter/bootstrap/issues/2764 pour la discussion sur l'ajout de fonctionnalités.

43
Scott Stafford

J'ai ajouté le code Javascript suivant pour empêcher 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;
  }
});
33
totas

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 la souris dessus:

.disabledTab{
    pointer-events: none;
}

Et ensuite, 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

18
Zsolt Tolvaly

Pas besoin de Jquery, juste une ligne CSS

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

Aussi, j'utilise la solution suivante:

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

Maintenant, vous venez d'ajouter la classe 'disabled' au li parent et l'onglet ne fonctionne pas et devient gris.

9
akopichin

Ancienne question mais elle m’a en quelque sorte orienté dans la bonne direction. La méthode que j'ai choisie consistait à ajouter la classe désactivée au li, puis à 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 personnes désactivées. Un peu comme la réponse de totas, mais il ne sera pas exécuté si à chaque fois qu'un utilisateur clique sur un lien de tabulation et qu'il n'utilise pas return false.

J'espère que ça va être utile à quelqu'un!

6
James

Pour mon usage, la meilleure solution a été un mélange de certaines des réponses ici, qui sont:

  • Ajout de la classe disabled au li que je veux désactiver

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

**** NOTE **: ** 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 valeur #your-id, ce qui n'est pas recommandé car votre onglet est désactivé. , donc ne devrait pas être consulté.

6
Cyril N.

Aveconly 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>
3
George Siggouroglou

Supposons que ceci soit votre onglet 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 des fichiers CSS dynamiques. 

$('#groups').css('pointer-events', 'none')
1
Vinaysingh Khetwal

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 avez besoin de l'impossibilité du lien

$('a[data-toggle="tab"]').removeClass('disabled');
1
RafaSashi

mes onglets étaient dans les panneaux, donc j'ai 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
pgee70

Pour éviter cela, la solution la plus simple et la plus propre consiste à ajouter onclick="return false;" à la balise 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>
  • L'ajout de "cursor:no-drop;" donne simplement l'impression que le curseur est désactivé, mais clickable, l'URL est ajoutée avec la cible href pour ex page.apsx#Home
  • Il n'est pas nécessaire d'ajouter la classe "disabled" à <li> ET de supprimer href 
0
Gaurravs

Aucune des réponses ne fonctionne pour moi. Supprimer data-toggle="tab" de la a empêche l'activation de l'onglet, mais ajoute également le hachage #tabId à l'URL. C'est inacceptable pour moi. Ce qui est également inacceptable, c'est l'utilisation de javascript.

Qu'est-ce qui fonctionne est ajouté la classe disabled à la li et en supprimant l'attribut href de sa contenant a.

0
im1dermike

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
Abou-Emish