Question

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

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>

Answer 1

您应该创建一个活动的类的 CSS

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

<强> JS

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

Answer 2

您可以查看下面的代码段：

$(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 个答案: