web-dev-qa-db-fra.com

Bootstrap 3 btn-group perd la classe active lorsque vous cliquez n'importe où sur la page

Pourriez-vous regarder ci-dessous Démo et expliquez-moi pourquoi btn-group perd la classe Active chaque fois que je clique sur un emplacement de la page. Je m'attendais à ce que le groupe btn bascule uniquement entre eux? ai-je fait quelque chose de mal ici?

<div class="container">
    <div class="well">
        <div class="btn-group">
            <button type="button" class="btn btn-default" id="regi1">Left</button>
            <button type="button" class="btn btn-default" id="regi2">Middle</button>
            <button type="button" class="btn btn-default" id="regi3">Right</button>
        </div>
     </div>
</div>
javascripttwitter-bootstraptwitter-bootstrap-3focus
33
Mona Coder

Ainsi, (comme indiqué dans les commentaires), le fond gris que vous voyez n'est pas une classe active appliquée, mais le comportement de sélection de focus de cet élément de bouton Bootstrap particulier. (Comme le contour en pointillé d'un lien hypertexte.) Essayez d'appuyer sur Tab après avoir cliqué sur un bouton. La sélection de la mise au point devrait alors changer.

Une façon d'obtenir le comportement souhaité est d'appliquer la classe active vous-même et d'utiliser un peu de jQuery pour échanger la classe active lorsque vous cliquez sur un bouton du groupe. Voici à quoi l'extrait pourrait ressembler:

$(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});

Le code ci-dessus supprime la classe active de tous les éléments .btn du .btn-group, puis applique la classe active à celui sur lequel vous venez de cliquer.

Voici une démo JSFiddle pour vous montrer les résultats (notez que j'ai codé le premier bouton avec la classe active dans le code HTML pour commencer). Si ce n'est pas ce que vous cherchiez, faites-le moi savoir et je serai ravi de vous aider davantage. Bonne chance!

92
Serlite

Je suis venu ici à la recherche d'une solution angulaire. Le ng-class est ce qui empêche la désélection sur flou.

<div class="btn-group">
  <label class="btn btn-outline-warning"
        ng-class="o.value == myinput.selected_value? 'active':''"
        ng-repeat="o in options">
    <input type="radio"
        autocomplete="off" 
        ng-value="{{o.value}}"
        ng-model="myinput.selected_value">
    {{o.value)}}
  </label>
</div>
0
Fakeer