如何使用Bootstrap 5实现切换按钮开关？

嘿，我看你在做切换开关的时候遇到了麻烦——你的代码现在只是两个独立的按钮，没有实现点击后只有一个处于激活状态的单选切换效果对吧？咱们来搞定它！

问题分析 #

你用了data-toggle="toggle"这个属性，但它其实是Bootstrap Toggle插件的用法，而且你当前的button结构也不满足单选切换的要求。如果不想引入额外插件，用原生Bootstrap就能实现你要的效果。

解决方案1：原生Bootstrap单选按钮组（推荐，无需额外插件） #

我们可以用隐藏的单选框(<input type="radio">)配合<label>来实现，把它们包裹在带有data-toggle="buttons"的.btn-group里，这样点击label就会触发对应的单选框，同时Bootstrap会自动给选中的label添加激活样式。

<div class="btn-group" role="group" aria-label="Month/Year toggle">
  <input type="radio" class="btn-check" name="toggle-group" id="option-month" autocomplete="off" checked>
  <label class="btn btn-danger" for="option-month">Month</label>

  <input type="radio" class="btn-check" name="toggle-group" id="option-year" autocomplete="off">
  <label class="btn btn-danger" for="option-year">Year</label>
</div>

关键说明：

• btn-check是Bootstrap内置的类，用来隐藏单选框
• 所有单选框的name属性必须一致，这样才能实现单选互斥
• checked属性可以设置默认选中的选项（这里默认选中Month）
• 点击<label>会自动关联对应的单选框，Bootstrap会自动给选中的label加上.active类，实现激活状态的视觉反馈

解决方案2：使用Bootstrap Toggle插件（需要引入插件） #

如果你坚持要用data-toggle="toggle"，需要先引入Bootstrap Toggle的CSS和JS文件，然后调整结构为单选按钮组的形式：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-danger active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Month
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option2" autocomplete="off"> Year
  </label>
</div>

注意：这种方式同样需要确保单选框name一致，并且引入Bootstrap Toggle插件才能正常工作。

这样调整后，点击Month或Year时就会自动切换激活状态，实现你想要的切换开关效果啦！

内容的提问来源于stack exchange，提问作者kato