单击时,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