如何用Bootstrap实现双Div互斥显示及单独隐藏功能？

1. 能否仅用Bootstrap实现图表切换与隐藏当前激活图表（无需JavaScript） #

可以实现，分两种场景处理：

• 允许使用Bootstrap内置JS（无需自定义JS）：直接用Bootstrap的nav-tabs组件就能完成图表切换。把两个图表分别放进.tab-pane容器，对应按钮用.nav-link并设置data-bs-toggle="tab"和data-bs-target指向对应图表容器。点击按钮时，Bootstrap内置JS会自动切换激活状态，显示对应图表并隐藏另一个。
  隐藏当前激活图表的话，给隐藏按钮加data-bs-toggle="collapse"，同时给所有.tab-pane加上collapse类，点击隐藏按钮时通过data-bs-target指向.tab-pane.active，就能折叠当前显示的图表。

• 完全不使用任何JS（包括Bootstrap内置JS）：靠HTML表单元素+CSS配合实现。用radio按钮模拟切换逻辑，把按钮样式改成Bootstrap按钮样式，通过CSS兄弟选择器控制图表的显示隐藏。示例代码：

  <div class="btn-group">
    <input type="radio" name="chart-switch" id="show-emotion" checked class="d-none">
    <label for="show-emotion" class="btn btn-primary">Emotion图表</label>
    
    <input type="radio" name="chart-switch" id="show-polarity" class="d-none">
    <label for="show-polarity" class="btn btn-primary">Polarity图表</label>
    
    <input type="radio" name="chart-switch" id="hide-all" class="d-none">
    <label for="hide-all" class="btn btn-secondary">隐藏当前图表</label>
  </div>
  
  <div class="mt-3">
    <div class="emotion-chart">Emotion图表内容</div>
    <div class="polarity-chart">Polarity图表内容</div>
  </div>
  

  搭配CSS：

  .emotion-chart, .polarity-chart { display: none; }
  #show-emotion:checked ~ .mt-3 .emotion-chart { display: block; }
  #show-polarity:checked ~ .mt-3 .polarity-chart { display: block; }
  

  点击隐藏按钮时，选中hide-all radio，两个图表都会被隐藏，全程无需JS。

2. 移除data-bs-target后图表切换无动画是否正常 #

完全正常。Bootstrap的切换动画由内置JS驱动：当按钮带有data-bs-target和data-bs-toggle属性时，JS会给目标元素添加/移除.collapsing、.show等包含过渡动画的类。如果移除data-bs-target，Bootstrap JS无法定位要操作的元素，也就不会触发这些动画类的切换，自然看不到动画效果。要保留动画，必须保留data-bs-target来指定目标元素。

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