Bootstrap 3 btn-group当点击页面上的任何位置时丢失活动类 [英] Bootstrap 3 btn-group Lose Active Class when Click any where on the Page

问题描述

请注意下面的 Demo ，让我知道为什么btn-group每当我点击页面上的任何地方，就失去了Active类。我期待的Btn组切换只能在彼此之间？

 < div class =container> 
< div class =well> 
< div class =btn-group> 
< button type =buttonclass =btn btn-defaultid =regi1> Left< / button> 
< button type =buttonclass =btn btn-defaultid =regi2>中间< / button> 
< button type =buttonclass =btn btn-defaultid =regi3> Right< / button> 
< / div> 
< / div> 
< / div> 
  

解决方案

你看到的填充实际上并不是一个正在使用的活动类 - 它是该特定引导按钮元素的焦点选择行为。 （像超链接的虚线轮廓）点击一个按钮后，试着按Tab，你应该看到焦点选择的变化。

获得你想要的行为的一种方法是自己动手应用活动类，并在点击组中的一个按钮时有一些jQuery来交换活动类。以下是代码片段的样子：

  $（。btn-group> .btn）。click（function ）{
 $（this）.addClass（active）。siblings（）。removeClass（active）; 
}）; 
  

上面的代码从所有的 .btn .btn-group 中的$ c>元素，然后将活动类应用到刚才单击的类。这里是一个 JSFiddle演示，告诉你这是什么实现（注意，我编写了第一个按钮，使活动类在HTML开始）。如果这不是你正在寻找的，请让我知道，我会很乐意进一步帮助。祝你好运！

CAn you please take a look at following Demo and let me know why btn-group is loosing Active class whenever I click any where on the page. I was expecting the btn-group toggle only between each other? did I do any thing wrong here?

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

解决方案

So, (as mentioned in the comments) that gray fill you see isn't actually an active class being applied - it's the focus selection behaviour of that particular Bootstrap button element. (Like the dotted outline of a hyperlink.) Try pressing Tab after clicking a button, and you should see the focus selection change.

One way to get the behaviour you want is to apply the active class yourself, and have a bit of jQuery to swap the active class when clicking a button in the group. Here's what the snippet might look like:

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

The code above removes the active class from all .btn elements in the .btn-group, then applies the active class to the one that was just clicked.

Here's a JSFiddle demo to show you what this achieves (note that I coded the first button to have the active class in the HTML to start with). If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!

这篇关于Bootstrap 3 btn-group当点击页面上的任何位置时丢失活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！