web-dev-qa-db-ja.com

Bootstrap 3 btn-groupは、ページ上の任意の場所をクリックするとアクティブクラスを失います

次の Demo を見て、ページのどこかをクリックしたときにbtn-groupがActiveクラスを失う理由を教えてください。私はbtn-groupがお互いの間でのみトグルすると思っていましたか？ここで何か間違ったことをしましたか？

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

したがって、（コメントで述べたように）表示される灰色の塗りつぶしは、実際に適用されているアクティブなクラスではありません。これは、特定のBootstrap button要素のフォーカス選択動作です。（点線のアウトラインのようにボタンをクリックした後、Tabキーを押すと、フォーカスの選択が変更されます。

必要な動作を取得する1つの方法は、アクティブクラスを自分で適用し、グループ内のボタンをクリックしたときにアクティブクラスをスワップするための少しのjQueryを用意することです。スニペットは次のようになります。

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

上記のコードは、.btnのすべての.btn-group要素からアクティブクラスを削除し、アクティブクラスをクリックされたクラスに適用します。

これが JSFiddleデモ であり、これが何を達成するかを示しています（最初のボタンをコーディングして、HTMLでアクティブなクラスを開始することに注意してください）。これがあなたの探していたものではない場合は、お知らせください。さらにサポートさせていただきます。幸運を！

97
Serlite

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