it-swarm.com.de

Bootstrap 3 btn-group Aktive Klasse verlieren, wenn Sie auf die Seite klicken

CAn sehen Sie sich bitte folgende Demo an und lassen Sie mich wissen, warum die btn-group die Active-Klasse verliert, wenn ich irgendwo auf die Seite klicke. Ich hatte erwartet, dass die BTN-Gruppe nur untereinander wechselt? habe ich hier etwas falsch gemacht?

<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>
33
Mona Coder

(Wie in den Kommentaren erwähnt) ist die graue Füllung, die Sie sehen, keine aktive Klasse, sondern das Verhalten der Fokusauswahl dieses speziellen Bootstrap-Schaltflächenelements. (Wie der gepunktete Umriss eines Hyperlinks.) Drücken Sie nach dem Klicken auf eine Schaltfläche die Tabulatortaste, und Sie sollten die Fokusauswahl ändern.

Um das gewünschte Verhalten zu erhalten, können Sie die aktive Klasse selbst anwenden und mit jQuery die aktive Klasse austauschen, wenn Sie auf eine Schaltfläche in der Gruppe klicken. So könnte das Snippet aussehen:

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

Der obige Code entfernt die aktive Klasse aus allen .btn-Elementen in .btn-group und wendet dann die aktive Klasse auf die Klasse an, auf die gerade geklickt wurde.

Hier ist eine JSFiddle-Demo , die Ihnen zeigt, was dies erreicht (beachten Sie, dass ich die erste Schaltfläche so programmiert habe, dass die aktive Klasse im HTML-Code zum Starten vorhanden ist). Wenn dies nicht das ist, wonach Sie gesucht haben, lassen Sie es mich wissen und ich helfe Ihnen gerne weiter. Viel Glück!

92
Serlite

Ich kam hierher und suchte nach einer Angular-Lösung. Der ng-class verhindert die Abwahl der Unschärfe.

<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