Question

您好我使用以下代码...

<script type="text/javascript"> 
$(function() {
$('#show_advertisement').click(function() {
    $('#gallery_logos').fadeOut('slow');
    $('#gallery_illustrations').fadeOut('slow');
    $('#gallery_webdesign').fadeOut('slow');
    $('#gallery_advertisments').fadeIn('slow');
});
$('#show_logo').click(function() {
    $('#gallery_advertisments').fadeOut('slow');
    $('#gallery_illustrations').fadeOut('slow');
    $('#gallery_webdesign').fadeOut('slow');
    $('#gallery_logos').fadeIn('slow');
});
   $('#show_illustration').click(function() {
    $('#gallery_advertisments').fadeOut('slow');
    $('#gallery_webdesign').fadeOut('slow');
    $('#gallery_logos').fadeOut('slow');
    $('#gallery_illustrations').fadeIn('slow');
});
   $('#show_web').click(function() {
    $('#gallery_advertisments').fadeOut('slow');
     $('#gallery_illustrations').fadeOut('slow');
      $('#gallery_logos').fadeOut('slow');
    $('#gallery_webdesign').fadeIn('slow');
});
$('#show_advertisement').trigger('click');

         });
</script>

基本上我展示的是四个div中包含的多个灯箱画廊，它们叠在一起，当你点击页面上的四个链接时，它们都会显示/隐藏。我遇到的问题是，当页面加载时，我会得到四个div上所有内容的简要视图，然后逐渐淡入show_advertisement div。虽然这只是一个小问题，但我觉得这会使页面看起来不专业。我没有使用Javascript或jQuery的经验，但我正在努力学习，如果你能帮助我，我会非常感激。谢谢！

Answer 1

您可以使用：

$('#gallery_logos, #gallery_illustrations, #gallery_webdesign').hide();
$('#gallery_advertisments').show();

而不是$('#show_advertisement').trigger('click');

Answer 2

要确保在页面加载时隐藏所有内容（但#gallery_advertisments），请将其设置为CSS：

#gallery_logos,
#gallery_illustrations,
#gallery_webdesign { 
   display: none;
}

#gallery_advertisments { 
   display: block;
}

简化您的javascript：

<script type="text/javascript"> 
$(function() {
  $('#show_advertisement').click(function() {
    $('#gallery_logos, #gallery_illustrations, #gallery_webdesign').fadeOut('slow');
    $('#gallery_advertisments').fadeIn('slow');
  });

  $('#show_logo').click(function() {
    $('#gallery_advertisments, #gallery_illustrations, #gallery_webdesign').fadeOut('slow');
    $('#gallery_logos').fadeIn('slow');
  });

  $('#show_illustration').click(function() {
    $('#gallery_advertisments, #gallery_webdesign, #gallery_logos').fadeOut('slow');
    $('#gallery_illustrations').fadeIn('slow');
  });

  $('#show_web').click(function() {
    $('#gallery_advertisments, #gallery_illustrations, #gallery_logos').fadeOut('slow');
    $('#gallery_webdesign').fadeIn('slow');
  });
});
</script>

在加载时显示/隐藏没有包含在div中的信息的div

2 个答案: