如何在每个Bootstrap btn-group上切换活动类

Question

我在btn-group div中有一堆按钮，我必须将它们全部设置为活动格式，并且只在用户点击按钮时切换类。 这是您可以看到的Demo从按钮中删除活动类后，它们仍然保持浅灰色背景！你能告诉我这是什么意思吗？我怎么能摆脱那个？

<div class="btn-group">
    <button type="button" class="btn btn-default active">1</button>
    <button type="button" class="btn btn-default active">2</button>
    <button type="button" class="btn btn-default active">3</button>
    <button type="button" class="btn btn-default active">4</button>
    <button type="button" class="btn btn-default active">5</button>
    <button type="button" class="btn btn-default active">6</button>
</div>

$(document).ready(function () {
    $("div").children().click(function () {
        $(this).toggleClass("active");
    });
});

请你告诉我如何摆脱活跃课程顶部的深灰色？

由于

Answer 1

如果要删除活动按钮中的灰色，只需按如下方式覆盖它：

.active{
  background-color:white !important;
}

注意：的

  

请你告诉我如何摆脱活跃课程顶部的深灰色？

好吧，如果您正在考虑第二张图片中突出显示的按钮，它没有活动类，它是一个非活动类。 通过将所有按钮初始设置为活动状态，首次单击它会变为非活动状态。 你可能想要考虑一下你在做什么。

<强>更新 如果你想改变灰色，可以通过添加另一个类并按如下方式切换它来实现：

.select{
   background-color:white !important;
}
$("div").children().click(function () {
    $(this).toggleClass("select");
});

工作fiddle