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

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演示,向您展示它实现了什么(请注意,我编写了第一个按钮,在HTML中开始使用活动类).如果这不是你想要的,请告诉我,我会很乐意进一步提供帮助.祝好运!