Question

我正在努力为我的朋友和家人建立一个有趣的网站，其中一个方面是点击一个按钮，他们的生物出现了。我想要的是你点击不同的生物，而前一个生物消失了。我怎么能这样做？
jQuery的：

$(document).ready(function(){
  $('.page-body2').hide();
  $('.page-body3').hide();
  $('.family-photo1').on('click', function(){
    $('.page-body2').toggle();
  });
  $('.family-photo2').on('click', function(){
    $('.page-body3').toggle();
  });
  ***CODE HERE?***
});

HTML：

<div class="page-body2">
      <div class="bren"><b>Brendon:</b></div>
      <p>**BIO**</p>
    </div><div class="page-body3">
      <div class="heath"><b>Heather:</b></div>
      <p>**BIO**</p>
    </div>

Answer 1

我为你准备了一个演示：https://jsfiddle.net/erkaner/dordnd9r/1/

$('.hideBio').hide();
$('button').click(function(){    
    $('.hideBio').fadeOut(200);//hide all bio each time
    $(this).prev('p').fadeIn(200);//show only the selected one
});

Answer 2

为了更好的用户体验

$('.hideBio').hide();
$('button').click(function(){   
    var l=$(this);
    $('.hideBio').fadeOut(100,function(){
            l.prev('p').fadeIn(100);
    }); 
});

https://jsfiddle.net/6tr0ey9r/1/

点击其他东西时如何关闭某些东西？

2 个答案: