通過單擊同一鏈接更改div

Question

我有#div1和#div2 。 默認情況下， #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'));
});