隐藏一个 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

在同一 class 上切换两者的点击会更容易。

$(".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>

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

Hiding a div to show another using jQuery

javascript

jquery

callback

show

hide