1

我有一组 div 在单击它们各自的菜单链接时淡出和淡入。第一个 div 应该在页面加载时自动加载，没有任何淡入淡出，如果没有加载任何内容，则应该只有淡入淡出效果。现在我完成了所有这一切，除了第一个 div 的即时加载。当我加载页面时，没有内容存在，出现淡出，然后第一个 div 自动淡入。如何确保我自动加载的第一个 div 没有任何淡入淡出？

当前代码：

$(document).ready(function () {
  $('a').bind("click", function () {
    $('a').removeClass("actief");
    $(this).addClass("actief");
    var fade = $(this);

    if ($('#content').html()) {
      $(this).addClass("actief");
      $('#content').stop().fadeTo(500, 0, function () {
        $('#content').html("").css('opacity', 0);
        fade.next().clone().appendTo('#content');
        $('#content').stop().fadeTo(500, 1);
      });
    } else {
      $('#content').css('opacity', 0);
      fade.next().clone().appendTo('#content');
      $('#content').stop().fadeTo(500, 1);
    }
  });

  $('a:first').trigger('click');
});

HTML：

这是html

<body>
    <div id="container">
        <div id="menudiv">
            <ul id="menu">
                <li>
                    <a>About</a>
                    <div>
                       <H1>About</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
                <li>
                    <a>Knowledge</a>
                    <div>
                       <H1>Knowledge</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
                <li>
                    <a>Expectations</a>
                    <div>
                       <H1>Expectations</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
                <li>
                    <a>More</a>
                    <div>
                       <H1>More</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
            </ul>
    </div>

    <div id="content">

    </div>
</div>

</body>

CSS

*{
    margin:0px;
    padding:0px;
}

#container{
    width:800px;
    height:600px;
    margin:auto;
    background-color:#6CF;
}

#menudiv{
    width:800px;
    background-color:#066;
    height:50px;
    float:left;
    margin-top:20px;
    border-bottom:2px solid orange;
}

#content{
    width:800px;
    background-color:#069;
    height:400px;
    float:left;
}

#content p{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:white;
    padding:10px;
}

#content img{
    border: 2px solid white;
    margin-left:10px;
    float:left;
    margin-right:10px;
}

H1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:white;
    padding:10px;
}

ul li{
    list-style-type:none;
    float:left;
    margin:10px;
    background-color:black;
    color:white;
    border:2px solid white;
    padding:4px;
}

ul li div{
    display:none;
    text-decoration:line-through;
}

ul li .actief{
    color:orange;
}

#menu ul li div{display:none}
#menu ul li:first-child div{display:block}
4

1 回答 1

0

你可以通过 CSS 做到这一点，

#menu ul li div{display:none}
#menu ul li:first-child div{display:block}

然后它将在页面加载时重置

（你可能想让你的 CSS 更具体一点）

更新一：

糟糕，没有发现 .clone() 位，而不是 .trigger("click")，您可以使用它...

$('a:first').next().clone().appendTo('#content');

这将按照您的描述将第一个 div 复制到页面正文中

更新二：

要保留 .trigger() ，您可以检测 .click 是否由真正的点击触发（请参见此处），然后在您的点击功能中绕过 .fade 效果（或者可能有 101 种其他方法可以做到这一点！）

于 2013-01-08T15:32:54.800 回答