javascript 单击时显示，隐藏和切换div

Posted 2021-05-03

HTML
<button class="Show">Show</button>
<button class="Hide">Hide</button>
<button class="toggle">Show &amp; Hide</button>
<div id="target"></div>
---------------------
CSS
#target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}
.Hide {
  display:none;
}
------------------
JS
$('.Show').click(function() {
    $('#target').show(500);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
$('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
$('.toggle').click(function() {
    $('#target').toggle('slow');
});