通過點擊相同鏈接更改div

Question

我有#div1和#div2。 #div默認爲可見，而隱藏#div2。點擊鏈接時，我想隱藏#div1並顯示#div2，當再次點擊鏈接時我想隱藏#div2並再次顯示#div1。

通過以下jQuery，我可以隱藏第一個div並顯示#div2，但我不知道如何在同一鏈接上再次單擊時顯示#div1。還我怎麼能根據可見DIV鈕鏈接的標題（即切換到DIV1或DIV2）

HTML：

<a class="switch" href="#">Switch to Div 2</a> 

<div id="div1">Div1</div> 
<div id="div2">Div2</div> 

的jQuery：

$(".switch").click(function() { 
    $('#div1').hide(); 
    $('#div2').show(); 
}); 

CSS ：

#div2 { 
    display: none; 
} 

演示： http://jsfiddle.net/De4x2/

Answer 1

嘗試toggle()：

http://jsfiddle.net/94bUG/

$(".switch").click(function() { 
    $('#div1, #div2').toggle(); 
    // the following line switches the text 
    $(this).text('Switch to Div ' + ($('#div1').is(':visible') ? '2' : '1')); 
});