显示/隐藏完整的 div

Question

我有 2 个 div，因为我想一次只显示一个 div 并隐藏第二个 div ex。 div 1 可见，然后 div 2 应该隐藏。到目前为止，我尝试了这个demo

除了页面加载之外，它按预期工作，两个 div 都是可见的。我想隐藏 div 1 和 div 2 一开始应该是可见的。我可以先知道如何隐藏 div 1 吗？

<div class="container">
  <div class="row">
    <div class="col-6  card-body targetDiv" id="div1">
      <div class="form-group pt-4">

        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">

        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
      <a class="btn btn-secondary showSingle" target="2" title="Add Reference"><i class="fas fa-ellipsis-v"></i></a>
    </div>

    <div class="col-6  card-body targetDiv" id="div2">
      <div class="form-group pt-4">

        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
      <a class="btn btn-secondary showSingle" target="1" title="Add Reference"><i class="fas fa-file"></i></a>
    </div>

  </div>

Answer 1

只需在“div1”组件上添加style 块即可；

类似这样的：

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