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

【问题标题】：Bootstrap 3 btn-group Lose Active Class when Click any where on the Page当单击页面上的任何位置时，Bootstrap 3 btn-group 丢失活动类
【发布时间】：2014-01-19 04:13:50
【问题描述】：

请您看看下面的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>

【问题讨论】：

我能想象到这种情况发生的唯一原因是在删除类的点击时执行了一些 JavaScript。你有任何相关的 JavaScript 可以分享吗？
你用过外部css吗？我觉得stat30是对的。css故障也可能发生。我不确定，请提供更多细节。
单击按钮时出现的灰色填充实际上并不是“活动”类的应用程序（没有） - 它实际上是按钮的焦点行为。（你知道，就像超链接的虚线轮廓如何显示它们被聚焦。）尝试在单击按钮后按 Tab，你应该会看到焦点选择移动到不同的元素。如果您想使用活动类，只需编写 jQuery 的 sn-p 即可在单击组中的按钮时应用/删除该类。（或使用 Bootstrap 选项卡！）如果您想查看 jQuery 示例，请告诉我。
一切都在那个演示中，没有额外的 jquery 或 css！
@Serlite 谢谢，但我该怎么做呢？我的意思是我喜欢保持第一个按钮被点击/按下/激活，直到另一个按钮被点击而不是从页面的其他部分点击！天哪，我用了很多点击！

标签： javascript twitter-bootstrap twitter-bootstrap-3 focus

【解决方案1】：

因此，（如 cmets 中所述）您看到的灰色填充实际上并不是正在应用的活动类 - 它是特定引导按钮元素的焦点选择行为。（就像超链接的虚线轮廓。）单击按钮后尝试按 Tab，您应该会看到焦点选择发生变化。

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

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

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

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

【讨论】：

从this question，你想做$(this).addClass("active").siblings().removeClass("active");而不是重新运行选择器。按照您的方式，单击任何按钮都会从页面上的其他 btn-groups 中删除 active 类。比较 jsfiddle.net/fzdfJ/67 和 jsfiddle.net/fzdfJ/68

【解决方案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>

【讨论】：