隐藏一个div以使用jQuery显示另一个

Question

基本上，我想做的是单击同一div1内的按钮时隐藏div1，在该div1隐藏之后，我希望div2在同一位置显示，该div2将具有另一个按钮，它将为您带来回到div1。 我希望能够使用jquery执行此操作。

我的html看起来像这样：

<div class="div1">
  <h2>Nonono...</h2>
  <br>
  <p>bla bla bla bla... </p>
  <button class="lalala-btn">Go to lalala</button>
</div>

<div class="div2">
  <h2>lalala..</h2>
  <br>
  <ul>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
    <li><p>some text</p></li>
  </ul>
  <button class="nonono-btn">Go to nonono</button>
</div>

我的CSS：

.div1 {
  position: absolute;
  display: block;
  visibility: visible;
}

div2 {
  position absolute;
  display: block;
  visibility: hidden;
}

我的jQuery看起来像这样：

$(document).ready(function() {

  //function that hides the div1 and shows the div2
  $(".lalala-btn").click(function(){
    $(".div1").hide(1000);
    $(".skills").show(1000);
  });
});

但这不起作用，我还必须创建第二部分以使其回到div1

Answer 1

如果您必须使用开始使用的方法，那么这里提供了一个可行的解决方案。 您的代码很接近，因此大多数更改都与CSS和某些错字有关，然后为第二个div添加了一个点击处理程序。

 $(document).ready(function() { //function that hides the div1 and shows the div2 $(".lalala-btn").click(function(){ $(".div1").hide(1000); $(".div2").show(1000); }); $(".nonono-btn").click(function(){ $(".div2").hide(1000); $(".div1").show(1000); }); }); 

 .div1 { position: absolute; top: 0; display: block; visibility: visible; } .div2 { position: absolute; top: 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"> <h2>Nonono...</h2> <br> <p>bla bla bla bla... </p> <button class="lalala-btn">Go to lalala</button> </div> <div class="div2"> <h2>lalala..</h2> <br> <ul> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> </ul> <button class="nonono-btn">Go to nonono</button> </div> 

Answer 2

在同一个班级切换两个人的点击会更容易。

 $(".lalala-btn").click(function (){ $(".div1").toggle(1000); $(".div2").toggle(1000); }); 

 .div1 { position: absolute; top: 0; display: block; } .div2 { position: absolute; top: 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"> <h2>Nonono...</h2> <br> <p>bla bla bla bla... </p> <button class="lalala-btn">Go to lalala</button> </div> <div class="div2"> <h2>lalala..</h2> <br> <ul> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> <li><p>some text</p></li> </ul> <button class="lalala-btn">Go to nonono</button> </div>