Question

我是jQuery的新手并试图找出如何实现以下目标......

我在下面显示了两个div，我希望group div在加载时显示但不是single div然后点击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

将您的代码更改为以下

Send to: <a data-div="group" href="#">Group</a> | <a data-div="single" href="#"> Single</a>

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

<script>
    $(document).ready(function(){
        $("#single").css("display", "none");
        $("a").click(function(e){
            e.preventDefault(); // This prevents the link behaviour
            $("div").css("display", "none");
            $("#"+ $(this).attr("data-div")).css("display", "block");
        });

    });
</script>

Answer 2

只需隐藏它们，然后取消隐藏刚刚点击的那个。

Send to: <a href="#" data-target="group" class="target">Group</a> | <a href="#" data-target="group" class="target">Single</a>

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

然后使用这个jQuery：

$('.target').on('click', function(e) {
    e.preventDefault();
    $('.toggle').hide();
    $( '#' + $(this).data('target') ).show();
});

Answer 3

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

<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>

Answer 4

这是在两个div元素之间切换的最佳方式：

$("#show_Blue").click(function(){
 $("#Blue").toggle();
 $("#Red").hide();
});

$("#show_Red").click(function(){
 $("#Red").toggle();
 $("#Blue").hide();
});

有一个演示HERE

jquery在两个div之间切换

4 个答案: