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 をもう少し具体的にしたい場合があります)

アップデート I:

おっと、.trigger("click") の代わりに .clone() ビットを見つけられませんでした。これを使用できます...

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

これにより、最初の div がページ本文にコピーされます。

更新 II:

.trigger() を保持するには、実際のクリックによって .click がトリガーされたかどうかを検出し (こちらを参照)、クリック関数で .fade 効果をバイパスします (または、おそらく他に 101 の方法があります!)

于 2013-01-08T15:32:54.800 に答える