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();
});

以下示例：

＆＃13;

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

＆＃13;

.hide {
  display: block;
}

.show {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

首先，您的HTML中有错误。在结束div之前，您还需要额外关闭form。

您的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>

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

2 个答案: