如何设置两个互斥显示div的初始状态，默认隐藏div1展示div2

要实现初始隐藏div1、仅显示div2，有三种常用实现方式，都不会影响你现有已写好的切换逻辑：

• 方法1：直接加内联样式（最快捷）
  直接给id为div1的元素添加style="display: none;"属性即可，修改后的对应代码如下：

<div class="col-6  card-body targetDiv" id="div1" style="display: none;">

页面加载时div1会直接隐藏，只有div2可见，点击切换按钮时原有逻辑会自动覆盖这个内联样式完成切换，不需要改其他代码。

• 方法2：用自定义CSS类统一控制（更易维护）
  先在你的样式表中添加隐藏类：

.hidden {
  display: none;
}

然后给div1添加hidden类：

<div class="col-6  card-body targetDiv hidden" id="div1">

后续如果要调整隐藏逻辑，只需要改.hidden类的样式即可，不用逐个修改元素属性。

• 方法3：通过JS初始化控制（适合逻辑复杂的场景）
  如果你的切换逻辑本身是JS写的，也可以在DOM加载完成后主动设置初始状态：

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('div1').style.display = 'none'
})

这种方式适合需要根据其他初始条件动态判断要隐藏哪个div的场景。

内容的提问来源于stack exchange，提问作者G.L.P