隱藏一個div來展現另一種使用jQuery

Question

基本上就是我想要做的是隱藏點擊同一DIV1內的按鈕時，在那之後DIV1隱藏我想DIV2在同一個地方顯示DIV1，即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

它會更容易點擊切換爲他們兩個在同一類。

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

Answer 2

如果你必須使用你已經開始用什麼這裏是一個可行的解決方案。您的代碼很接近，所以大部分的變化涉及到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>