Bootstrap 3 btn-单击页面上的任意位置时，组将丢失活动类
Bootstrap 3 btn-单击页面上的任意位置时，组将丢失活动类
提问于 2014-01-02 00:31:18
CAn你可以看看下面的Demo，让我知道为什么当我点击页面上的任何地方时，btn-group都会失去活动类。我希望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>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-01-02 00:51:13
所以，(正如评论中提到的)你看到的灰色填充实际上不是一个正在应用的活动类-它是那个特定Bootstrap按钮元素的焦点选择行为。(类似于超链接的虚线轮廓。)在单击按钮后尝试按Tab键，您应该会看到焦点选择发生了变化。
获得想要的行为的一种方法是自己应用活动类，并在单击组中的按钮时使用一点jQuery来交换活动类。下面是代码片段可能的样子：
$(".btn-group > .btn").click(function(){
$(this).addClass("active").siblings().removeClass("active");
});上面的代码从.btn-group中的所有.btn元素中删除活动类，然后将活动类应用到刚刚单击的那个元素。
下面的JSFiddle demo向您展示了这样做的目的(请注意，我编写了第一个按钮，使其在HTML中具有活动类)。如果这不是你想要的，请让我知道，我很乐意为你提供进一步的帮助。祝好运!
Stack Overflow用户
发布于 2017-10-07 22:19:15
我来这里是为了寻找一个角度的解决方案。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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20870671
复制相关文章
相似问题
腾讯云开发者
