Bootstrap 单选切换按钮开关 css

Question

我使用的是 Bootstrap 版本 3.37，我有两个切换按钮，用户可以从中 select。

我想做的是一旦点击蓝色按钮，它应该是深色的“活动”，如果点击绿色按钮，那么绿色应该是“活动”。我怎么做？现在，无论我点击哪个切换按钮，绿色始终是“活动”按钮。我是否必须编写任何 javascript 代码来手动执行此操作，或者是否有可以在我可以使用的 boostrap 中使用的内置函数？谢谢

    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active" >
        <input type="radio" name="green" id="green" value="green"> Green
      </label>
      <label class="btn btn-default" >
        <input type="radio"  name="blue" id="blue" value="blue"> Blue
      </label>
    </div>

Answer 1

这不是 Bootstrap 或 jQuery 问题；它与 Javascript 或 CSS 无关；只是 HTML.

HTML 在单选按钮上使用“名称”属性来定义一组单选按钮（因此它知道当您 select 集合中的另一个单选按钮时要关闭哪些单选按钮).

因此，您的两个单选按钮都需要具有相同的名称属性。在下面的示例中，我将它们命名为“颜色”。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active" >
    <input type="radio" name="colour" id="green" value="green"> Green
  </label>
  <label class="btn btn-default" >
    <input type="radio"  name="colour" id="blue" value="blue"> Blue
  </label>
</div>

Answer 2

除了 @Dave Cross 提到的内容之外，您不能只切换活动 class 而没有 javascript。但是你可以通过简单的 HTML 和 CSS 通过稍微重新构建你的 HTML 模板来实现它，如下所示

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    padding: 6px 12px;
    border-style: solid;
    border-width: 1px;
}

input {
 display: none;
}

input:checked + label{
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

<div class="btn-group" data-toggle="buttons">
  <input type="radio" name="color" id="green" value="green" />
  <label for="green" class="btn btn-default"> Green </label>
  <input type="radio"  name="color" id="blue" value="blue" />
  <label for="blue" class="btn btn-default"> Blue </label>
</div>

使用 jQuery，您可以通过监听更改事件来切换活动 class，如下所示。

$('#color-switch').on('change', 'input', function() {
  const container = $(this).closest('.btn-group');
  container.find('.active').removeClass('active');
  container.find('input:checked').parent().addClass('active');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="color-switch" class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
        <input type="radio" name="color" id="green" value="green"/> Green
      </label>
  <label class="btn btn-default">
        <input type="radio"  name="color" id="blue" value="blue"/> Blue
      </label>
</div>

Bootstrap 单选切换按钮开关 css

Bootstrap radio toggle buttons switch css

javascript

jquery

togglebutton

bootstrap-4