jQuery:隐藏div并在其位置显示另一个

Question

我知道之前已经问过这个问题,但我发现的所有其他答案对我来说太复杂了.当您单击按钮时,我需要一个部分消失,另一个部分显示在其位置.

我怎么能用jQuery做到这一点？

这是我的代码的大纲:

<div class="container">
  
  <div class="hide">
    <button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
  <button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
  </div>
  
  <div class="show mt-3">
    <form>
      <div class="form-group mb-2">
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      </div>
      <button class="btn btn-block btn-primary rounded-0">Button</button></div>
    </form>
  </div>

</div>

我需要做什么CSS和jQuery才能使这个工作？那么第二部分(.show)恰好出现在第一部分的位置？

Answer 1

您需要将click事件绑定到按钮,.show()要显示的部分和.hide()要隐藏的部分.

$('.btn').on('click', function() {
   $('div-to-show').show();
   $('div-to-hide').hide();
});

示例如下:

$('#btn').on('click', function() {
  $('.hide').hide();
  $('.show').show();
});

.hide {
  display: block;
}

.show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
<div class="hide">
  <button class="btn btn-block btn-primary rounded-0 mb-2">Button</button>
  <button class="btn btn-block btn-primary rounded-0 btn-hide">Button</button>
</div>
<div class="show mt-3">
  <form>
    <div class="form-group mb-2">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </form>
</div>