当点击离开时，Bootstrap btn-group 按钮会停用答案

【问题标题】：Bootstrap btn-group button deactivates when clicking away当点击离开时，Bootstrap btn-group 按钮会停用
【发布时间】：2014-07-17 05:43:17
【问题描述】：

我正在使用 Bootstrap v3，并且我正在使用按钮组功能作为在 3 个类别之间进行选择的一种方式。这些类别之一也应该在页面加载时预先选择。但是，每当我点击远离所选按钮时，它就会被停用。

如果我单击另一个按钮，这很正常，但如果我单击它之外的任何位置，则所选按钮会停用。此外，无论我是否选择其他按钮，我使用“活动”类预激活的按钮都保持活动状态。

有没有一种方法可以让这些按钮表现得像一组单选按钮，即使当我点击远离它们并且它们失去焦点时也能保持它们的状态？

这是我目前正在使用的代码：

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default active"><span class="goods">Good</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="services">Service</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"><span class="spaces">Space</span></button>
    </div>
</div>

编辑：这是显示我的问题的 jsfiddle 的链接：http://jsfiddle.net/7JT6M/

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

您需要 javascript 逻辑来维护状态。

$(".type").click(function(){
   $(".type").removeClass("active");
   $(this).addClass("active");
});

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default type active"><span class="goods">Good</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default type"><span class="services">Service</span></button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default type"><span class="spaces">Space</span></button>
    </div>
</div>

DEMO

【讨论】：

谢谢，这太完美了！