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> 

Answer 2

首先，您的HTML中有一个错误。 在结帐form之前，您还有一个额外的结帐div 。

您的div元素之一将默认为隐藏，而另一个将显示。 然后在您触发（单击按钮）时，我们将两者的显示互换。

 // Get references to the two areas var divs = $("#div1, #div2"); // When the "trigger" button is clicked, toggle the hidden class on both elements $("#btnShowHide").on("click", function(){ divs.toggleClass("hidden"); }); 

 .hidden { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="hidden" id="div1"> <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" id="div2"> <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> </form> </div> <button id="btnShowHide" type="button">Click to toggle display</button> </div>