4

我有#div1#div2#div默认情况下可见,而#div2隐藏。单击链接时,我想隐藏#div1并显示#div2,再次单击链接时,我想再次隐藏#div2并显示#div1

使用下面的 jQuery,我可以隐藏第一个 div 和 display ,但是当再次单击同一链接时#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/

4

1 回答 1

11

尝试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'));
});
于 2013-10-17T19:29:49.293 回答