Bootstrap 3 btn-group Lose Active Class, когда нажимает любое место на странице

Пожалуйста, взгляните на Demo и сообщите мне, почему btn-group теряет активный класс всякий раз, когда я нажимаю любой, где на стр. Я ожидал, что группа btn переключится только между собой? я сделал что-то не так здесь?

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

Ответ 1

Итак, (как упоминалось в комментариях), что серый залив, который вы видите, фактически не является активным классом, который применяется - это поведение выбора фокуса этого элемента кнопки Bootstrap. (Как пунктирная контур гиперссылки.) Попробуйте нажать Tab после нажатия кнопки, и вы должны увидеть изменение выбора фокуса.

Один из способов получить поведение, которое вы хотите, - это применить активный класс самостоятельно и немного изменить jQuery для замены активного класса при нажатии кнопки в группе. Вот что может выглядеть сниппет:

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

Приведенный выше код удаляет активный класс из всех .btn элементов в .btn-group, затем применяет активный класс к тому, который был просто нажат.

Здесь JSFiddle demo, чтобы показать вам, чего это добивается (обратите внимание, что я закодировал первую кнопку, чтобы начать активный класс в HTML). Если это не то, что вы искали, сообщите мне, и я буду рад помочь вам. Удачи!

Ответ 2

Я пришел сюда в поисках решения Angular. ng-class - это то, что предотвращает размытие размытия.

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