通过单击相同的链接更改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'));
});