Question

您可以查看以下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>

Answer 1

所以，（如评论中所述）你看到的灰色填充实际上并不是一个被应用的活动类 - 它是该特定Bootstrap按钮元素的焦点选择行为。（与超链接的虚线轮廓一样。）单击按钮后尝试按Tab键，您应该看到焦点选择发生变化。

获得所需行为的一种方法是自己应用活动类，并在单击组中的按钮时使用一些jQuery来交换活动类。这是代码片段的样子：

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

上面的代码会从.btn中的所有.btn-group元素中删除活动类，然后将活动类应用于刚刚单击的元素。

这是一个JSFiddle demo来向您展示这实现了什么（请注意，我编写了第一个按钮，让HTML中的活动类开始）。如果这不是你想要的，请告诉我，我会很乐意进一步提供帮助。祝你好运！

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

单击任何页面上的任何位置时，Bootstrap 3 btn-group丢失活动类

2 个答案: