Javascript / JQuery 在按钮组上的 2 个按钮之间切换活动类

【问题标题】：Javascript / JQuery Toggle Active Class between 2 buttons on a button groupJavascript / JQuery 在按钮组上的 2 个按钮之间切换活动类
【发布时间】：2017-04-02 14:25:00
【问题描述】：

我正在使用带有btn-group 的引导程序。有html：

<div class="btn-group btn-group-sm" role="group">
    <div type="button" class="btn btn-default btn-1">Button 1</div>
    <div type="button" class="btn btn-default btn-2 active">Button 2</div>
</div>

按钮 2 已激活。

目前我这样做是为了从一个类中删除活动类并将其添加到另一个类中。

$('.btn-2').removeClass('active');
$('.btn-1').addClass('active');

这是最干净的方法还是有更好的方法可以在两个按钮之间切换这个活动类？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

用途：

$('.btn-group').on('click', '.btn', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

我认为代码是相当不言自明的？它只是从您单击的按钮的兄弟姐妹中删除任何现有的“活动”类，并将该类添加到单击的按钮。

这是一个有效的 sn-p：

$('.btn-group').on('click', '.btn', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group btn-group-sm" role="group">
  <div type="button" class="btn btn-default btn-1">Button 1</div>
  <div type="button" class="btn btn-default btn-2 active">Button 2</div>
</div>

【讨论】：