jquery 在两个 div 之间切换

Question

我是 jQuery 新手，正在尝试找出如何实现以下目标...

我有两个 div，如下所示，我希望 group div 在加载时显示，但不显示 single div，然后 onclick group 或 single 我需要在两者之间切换。如何才能做到这一点。这就是我到目前为止所拥有的。

Send to: <a href="">Group</a> | <a href=""> Single<</a>

<div id="group">I'm a group</div>
<div id="single">I'm a single object</div>

更新:

所以这样的事情似乎对我有用......

 $("#link").click(function(e) {
      e.preventDefault();
      $("#divA, #divB").toggle();
      $(this).text(function(i, text) { return (text == "Show viewA") ? "Show viewB" : "Show viewA" });
    });

但 divB 不显示。

Answer 1

查看您的示例，我创建了一个简单的脚本，可以很好地满足您的需求。

<script>
  $(document).ready(function() {

    var $divA = $('#a'),
    $divB = $('#b'),
    $link = $('#link');
    $diplaytext = $('#display_text');

  // Initialize everything
  $link.text( 'Show Single' );
  $diplaytext.text( 'Group' );
  $divA.hide();

  $link.click(function(){

  // If A is visible when the link is clicked
  // you need to hide A and show B
  if( $divA.is( ':visible' ) ){
    $link.text( 'Show Single' );
    $diplaytext.text( 'Group' );
    $divA.hide();
    $divB.show();
  } else {
    $link.text( 'Show Group' );
    $diplaytext.text( 'Single Here' );
    $divA.show();
    $divB.hide();
  }

  return false;
  });


  });
</script>

然后...

display text: <span id="display_text"></span> | change: <a href="#" id="link" ></a>
<div id="a">a</div>
<div id="b">b</div>