javascript - 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 事件绑定(bind)到按钮，.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>