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 に答える