Question

我使用的是 Bootstrap 3.37 版，我有两个切换按钮可供用户选择。

我想要做的是一旦蓝色按钮被点击，它应该是深色的“活动”，如果绿色按钮被点击，那么绿色应该是“活动”。我怎么做？现在，无论我单击哪个切换按钮，绿色始终是“活动”按钮。我是否必须编写任何 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 使用单选按钮上的“名称”属性来定义哪些单选按钮在一个集合中（这样当你在集合中选择另一个时它知道要关闭哪些）。

因此，您的两个单选按钮都需要具有相同的名称属性。在下面的例子中，我给它们起了个名字“颜色”。

Completion

Answer 2

除了 @Dave Cross 提到的内容之外，您不能在没有 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，您可以通过监听更改事件来切换活动类，如下所示。

$('#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

2 个答案: