JQuery .replaceWith（）或.html（）

Question

我試圖改變一個div內容到另一個，反之亦然當按鈕被點擊。我還想在內容區域中爲單獨的div添加一些動畫。我想要它在兩個div之間切換。對於intsance，在按btn1時顯示section1的產品，按btn2時顯示section2的產品。

HTML

<button id="btn1" type="button" class="btn">btn1</button> 
<button id="btn2" type="button" class="btn">btn2</button> 

<div id="section1"> 
<!-- content goes here --> 
</div> 
<div id="section2"> 
<!-- content goes here --> 
</div> 

JQUERY

$(document).ready(function() { 
    var section1 = $('#section1') 
    var section2 = $('#section2') 

    $('#btn1').click(function() { 
    $('#section1').html($('#section2').html()); 
    }); 

    $('#btn2').click(function() { 
    $('#section2').html($('#section1').html()); 
    }); 
}); 

任何幫助將不勝感激！ :)

Answer 1

你最好不要使用show()和hide()：

$('#btn1').click(function() { 
    $('#section1').show(); 
    $('#section2').hide(); 
}); 

$('#btn2').click(function() { 
    $('#section2').show(); 
    $('#section1').hide(); 
}); 

這比用HTML來得容易。此外，當你更先進時，你可以嘗試各種效果，如淡化。 Here是各種jQuery效果的演示，您可以使用它們來顯示和隱藏（還有其他效果，不涉及顯示和隱藏）。 （此演示需要安裝的jQuery UI的爲好。）

Answer 2

尋找一位像更換樂趣笑

$(document).ready(function() { 
 
    $('button#btn1').bind('click', function() { 
 
    temp = $('div#section1').text(); 
 
    $('div#section1').text($('div#section2').text()); 
 
    $('div#section2').text(temp); 
 
    }); 
 
    $('button#btn2').bind('click', function() { 
 
    temp = $('div#section2').text(); 
 
    $('div#section2').text($('div#section1').text()); 
 
    $('div#section1').text(temp); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<p><button id="btn1" type="button" class="btn">btn1</button></p> 
 
<p><button id="btn2" type="button" class="btn">btn2</button></p> 
 
<p><hr></p> 
 
<p><div id="section1">Lorem ipsum dolor sit amet.</div></p> 
 
<p><div id="section2">Lorem consectetur adipiscing elit. Maecenas in.</div></p>