javascript - Bootstrap单选切换按钮切换css

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>

标签： javascriptjquerybootstrap-4togglebutton

Answer 1

除了@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>