html - Bootstrap btn-group 按钮在点击离开时停用

Question

我正在使用 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/

Answer 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