将引导程序 3 至 4 个按钮切换升级为单选按钮

Question

我在将引导按钮组从 Bootstrap 3 升级到 Bootstrap 4 时遇到了麻烦，它们应该是单选按钮输入？

基本上，我只想让按钮打开和关闭。 我不断地来回尝试让升级工作，或者只是自己添加 JavaScript 来使按钮切换，但我都无法工作。

这是“工作”Bootstrap 3 实现，位于 https://www.uvm.edu/femc/data/archive/project/1977-1985_Vermont_Sugarbush_Health_Survey/dataset/1977-vermont-sugarbush-health-survey-tree/数据#

<div class="btn-group" data-toggle="buttons-radio">
    <a href="#grid" data-view="grid" class="btn active">Table</a> 
    <a href="#graph" data-view="graph" class="btn">Graph</a> 
</div>                              

上面的链接有与之关联的 javascript，所以我很困惑如何将类添加到单选按钮并让它们继续工作。

我尝试使用 bootstrap 4 文档（https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin）并将输入包装在链接中，可以在以下网址中看到： https://dev.vmc.w3.uvm.edu/xana/CI4/data/archive/project/1977-1985_Vermont_Sugarbush_Health_Survey/dataset/1977-vermont-sugarbush-health-survey-tree/data#，但这给出了我的实际单选按钮不会像第一个链接中那样显示和隐藏内容。 现在代码如下所示：

<div class="btn-group btn-group-toggle" data-toggle="buttons ">
   <a href="#grid " data-view="grid " class=" ">
      <label class="btn btn-secondary ">
      <input type="radio " name="options " id="option1 " autocomplete="off ">Table</label>
   </a>                  
   <a href="#graph " data-view="graph ">
      <label class="btn btn-secondary active ">
      <input type="radio " name="options " id="option1 " autocomplete="off ">Graph</label>
   </a>                  
</div>  

我也很困惑是否需要链接到另一个js文件？ 我在文档中没有看到任何指向“按钮插件”文件的内容，但听起来这本身并不包含在内？ 在哪里可以找到要附加的 CDN 或文件？ 现在我已经附加了 bootstrap 4 js 和 css 以及 jquery 和 popper.min.js。

Answer 1

Bootstrap 4 不再使用按钮单选。使用 btn-group-toggle 和 data-toggle="buttons" 并在标签内输入

$(document).ready(function() {
  $('.btn-group-toggle input').on('change', function() {
    var view = $(this).parent().text().trim().toLowerCase();
    $('.content-section').hide();
    $('#' + view).show();
  });
});

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery (required for Bootstrap 4) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Popper.js (required for Bootstrap 4) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked> Table
   </label>
  <label class="btn btn-secondary">
      <input type="radio" name="options" id="option2" autocomplete="off"> Graph
   </label>
</div>
<div id="table" class="content-section">Table Content</div>
<div id="graph" class="content-section" style="display:none;">Graph Content</div>

但是为什么BS5不需要jQuery呢？

document.querySelectorAll('input[name="viewOptions"]').forEach((radio) => {
  radio.addEventListener('change', (event) => {
    document.querySelectorAll('.content-section').forEach((section) => {
      section.style.display = 'none';
    });
    document.getElementById(event.target.id.replace('btn', '').toLowerCase()).style.display = 'block';
  });
});

<!-- Bootstrap 5 JS (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />



<div class="btn-group" role="group" aria-label="View options">
  <input type="radio" class="btn-check" name="viewOptions" id="btnTable" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnTable">Table</label>

  <input type="radio" class="btn-check" name="viewOptions" id="btnGraph" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnGraph">Graph</label>
</div>
<div id="table" class="content-section">Table Content</div>
<div id="graph" class="content-section" style="display:none;">Graph Content</div>