1

您好，我正在使用以下代码...

<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 彼此堆叠，并且当您单击页面上的四个链接时全部显示/隐藏。我遇到的问题是，当页面加载时，我会简要查看四个 div 上的所有内容，然后淡入 show_advertisement div。虽然这只是一个小问题，但我觉得它使页面看起来不专业。我没有使用 Javascript 或 jQuery 的经验，但我正在努力学习，如果你能帮助我，我将不胜感激。谢谢！

4

2 回答 2

1

您可以使用：

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

代替$('#show_advertisement').trigger('click');

于 2013-03-19T06:19:02.123 回答
0

为确保#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>
于 2013-03-19T06:33:15.833 回答