将活动状态添加到按钮组中的按钮答案

【问题标题】：add active state to button in a button group将活动状态添加到按钮组中的按钮
【发布时间】：2016-03-05 10:02:15
【问题描述】：

我有一个按钮组，我想为已选择的按钮添加一个活动状态，然后如果选择了另一个按钮，则从前一个按钮中删除突出显示状态。

HTML：

<div class="btn-group" role="group">
   <button type="button" class="btn btn-default" id="question-company-wide">
      <i class="fa fa-building fa-lg"></i> <%= t('.company_label') %>
   </button>
   <button type="button" class="btn btn-default" id="question-group-specific">
      <i class="fa fa-users fa-lg"></i> <%= t('.groups_label') %>
   </button>
   <button type="button" class="btn btn-default" id="question-user-specific">
      <i class="fa fa-user fa-lg"></i> <%= t('.employees_label') %>
   </button>
</div>

【问题讨论】：

CSS 的伪代码，也许可以试试 :active 例子是.btn{ color:red; } .btn:active{color:blue;}
看起来您正在使用引导程序，所以这个问题应该可以帮助您：stackoverflow.com/questions/18391272/…

标签： jquery

【解决方案1】：

你可以看看下面的代码sn-p：

$(document).ready(function(){
  $("div.btn-group button.btn").click(function(){
    $("div.btn-group").find(".activeButton").removeClass("activeButton");
    $(this).addClass("activeButton");
  });  
});

.activeButton{
  color:blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <div class="btn-group" role="group">
      <button type="button" class="btn btn-default" id="question-company-wide">
        <i class="fa fa-building fa-lg"></i> company_label
      </button>
      <button type="button" class="btn btn-default" id="question-group-specific">
        <i class="fa fa-users fa-lg"></i> groups_label
      </button>
      <button type="button" class="btn btn-default" id="question-user-specific">
        <i class="fa fa-user fa-lg"></i> employees_label
      </button>
    </div>

【讨论】：

【解决方案2】：

你应该创建一个活动类 CSS

.uiButton:active, .active {
    background-color:blue;
}

$('.uiButton').click(function() {
    $(this).toggleClass("active");
});

【讨论】：