Bootstrap 3 btn-group perdre la classe Active quand Cliquez n'importe où sur la Page
Pouvez-vous s'il vous plaît jeter un oeil à la suite Démo et laissez-moi savoir pourquoi btn-group est de perdre de la classe Active à chaque fois que je clique n'importe où sur la page. Je m'attendais à ce que le groupe btn ne tourne qu'entre eux? ai-je fais 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>
2 réponses
donc, (tel que mentionné dans les commentaires) que gray fill que vous voyez n'est pas en fait une classe active appliquée - c'est le comportement de sélection de la mise au point de cet élément particulier du bouton Bootstrap. (Comme le contour pointillé d'un hyperlien.) Essayez D'appuyer sur L'onglet Après avoir cliqué sur un bouton, et vous devriez voir le changement de sélection de mise au point.
une façon d'obtenir le comportement que vous voulez est d'appliquer vous-même la classe active, et avoir un peu de jQuery pour échanger la classe active en cliquant sur un bouton dans le groupe. Voici à quoi pourrait ressembler l'extrait:
$(".btn-group > .btn").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
Le code ci-dessus supprime la classe active de tous les .btn dans le .btn-group, puis applique la classe active à celle qui vient d'être cliquée.
Voici un JSFiddle démo pour vous montrer ce que cela permet (notez que j'ai codé le premier bouton pour avoir la classe active dans le HTML pour commencer). Si ce n'est pas ce que vous cherchiez, faites-le moi savoir et je serai heureux d'aider davantage. Bon la chance!
je suis venu ici à la recherche d'une solution Angulaire. 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>