jquery - jQuery 淡入淡出 - 在页面加载时显示 div

Question

我有一个简单的 jquery fade 可以完美地工作，我试图让它在打开页面时自动显示第一个 div。

当前页面加载时没有内容

http://jsfiddle.net/Wqc9N/10/

 $(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
  });

Answer 1

到目前为止，您正在通过此代码为每个链接注册点击事件

$(".link").click(function(e) {
    e.preventDefault();
    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

我的建议是在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码后触发点击

所以用你的代码试试这个

$( document ).ready(function() {
    $(".link")[0].click(); 
});

小提琴

Answer 2

在 DOM 完全加载后执行 .show() 函数：

$(function() {
     $('#content1').show();
});

http://jsfiddle.net/Wqc9N/11/

Answer 3

尝试

$('#' + $('a:eq(0)').data('rel')).fadeIn('slow');

$(".link").click(function(e) {
  e.preventDefault();
  $('.content-container div').fadeOut('slow');
  $('#' + $(this).data('rel')).fadeIn('slow');
});

小提琴演示

希望能帮助到你

Answer 4

我没有发现任何困难来显示第一个 div

$('#content1').fadeIn('slow');
$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
  });

更新的演示