Question

我正在使用Bootstrap v3，并且我使用按钮组功能作为在3个类别之间进行选择的方法。在页面加载时也应预先选择其中一个类别。但是，每当我单击所选按钮时，它都会被取消激活。

如果我点击另一个按钮，这是正常的，但如果我点击它之外的任何地方，则所选按钮会停用。此外，按钮我预先激活＆＃34;活动＆＃34;无论我选择其他按钮，类都保持活动状态。

有没有办法可以让这些按钮表现得像一组单选按钮，即使我点击它们并且它们失去焦点也会保持状态？

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

<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

单击时，Bootstrap btn-group按钮将停用

1 个答案: