Bootstrap 3 btn - Grupa traci aktywną klasę po kliknięciu dowolnego miejsca na stronie

Czy możesz spojrzeć na następujące Demo i dać mi znać, dlaczego btn-group traci Active class za każdym razem, gdy kliknę dowolne miejsce na stronie. Spodziewałam się, że BTN-Grupa przełącza się tylko między sobą? zrobiłem coś złego?

<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>
Author: Serlite, 2014-01-01
Source

2 answers

Tak więc (jak wspomniano w komentarzach) to gray fill, które widzisz, nie jest w rzeczywistości aktywną klasą - jest to zachowanie wyboru ostrości danego elementu przycisku Bootstrap. (Jak przerywany kontur hiperłącza.) Spróbuj nacisnąć Tab po kliknięciu przycisku, a zobaczysz zmianę wyboru ostrości.

Jednym ze sposobów na uzyskanie pożądanego zachowania jest samodzielne zastosowanie aktywnej klasy i posiadanie odrobiny jQuery do zamiany aktywnej klasy po kliknięciu przycisku w grupie. Oto jak może wyglądać ten fragment: 

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

Powyższy kod usuwa klasę active ze wszystkich elementów .btn w .btn-group, a następnie stosuje klasę active do tej, która została właśnie kliknięta.

Oto jsfiddle demo, aby pokazać ci, co to osiąga (zauważ, że zakodowałem pierwszy przycisk, aby mieć aktywną klasę w HTML na początek). Jeśli nie tego szukałeś, daj mi znać, a chętnie pomogę. Powodzenia!

 87
Author: Serlite,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-26 08:58:52

Przyszedłem tu, szukając kątowego rozwiązania. ng-class zapobiega usunięciu zaznaczenia przy rozmyciu.

<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
Author: Fakeer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-07 14:19:14