1

div をフェードインおよびフェードアウトして、別の div に置き換えることができるシナリオを実現しようとしています。この部分は作業していますが、フェードインする DIV に DIV が含まれていると、DIV は完全に消えます。

例：

<center>
        <ul id="menu">
            <li><a href="#content1">Home</a>&nbsp;&nbsp;|</li>
            <li><a href="#content2">Work</a>&nbsp;&nbsp;|</li>
            <li><a href="#content3">Blog</a>&nbsp;&nbsp;|</li>
            <li><a href="#content4">Contact</a></li>
        </ul>
    </center>
        <hr class="style-main">
        <center><img src="{image:homeHeaderImage}"></center>
</div>

 <div id="contentWrap">
   <div id="content1">
         Home, content should go here :)

     </div>

これは機能します。DIV「content1」の内容がこのように見える場合、完全にフェードインおよびフェードアウトします。しかし、「content1」や「content2」などのコンテンツをスタイリングしたいので、このようにDIVを配置しました。

<div id="contentWrap">
   <div id="content1">
         <div id="homeContent">
         Home, content should go here :(
         </div>

     </div>

これにより、リンクをクリックしてこの特定の DIV をフェードすると、内容のない完全に白くなります。コンテンツがレンダリングされない理由がわかりません。

これをjQueryスクリプトに使用しています

$(function() {
$('#contentWrap div').hide();
$('#contentWrap div:first').show();
$('#thumbs a:first').addClass('active');

$('#thumbs a').click(function() {
    if ($(this).hasClass('active') == true) {
        return false;
    }
    else {
        $('a.active').removeClass('active');
        $(this).addClass('active');

        $('#contentWrap div').fadeOut();
        var contentToLoad = $(this).attr('href');
        $(contentToLoad).fadeIn();

        return false;
    }
});

});

ここに jsFiddle があります。ホーム メニュー項目に問題があります。あなたが言うことができるように、他のものは正常に動作します。

http://jsfiddle.net/uyAzp/

4

3 に答える 3

3

あなたのjQueryには次の行があります：

$('#contentWrap div').hide();

これにより、#content1 内の div を含むすべての div が非表示になります

そのため、ホーム ボタンをクリックすると、#content1 はフェードしますが、表示したい情報を含む #content1 内の div はまだ非表示になっています。

これをcssに追加することで簡単に解決できます：

#homeContent{ display:block !important; }

最初からすべての div を非表示にする必要がないように、jQuery を少し書き直したほうがよい場合もあります。(css を介して display:none に配置します)

于 2012-11-05T10:14:33.003 に答える
1

CSSセレクターは、divの下のすべての要素を選択するように設定されています#contentWrap。

これらをこれに変更すると#contentWrap > div、直接の子であるもののみが選択されます。

このような：

jsFiddle

ロード時にすべてが同時に表示されないようにするdisplay: noneには、CSSに追加する必要があります。#contentWrap > div

于 2012-11-05T10:41:21.727 に答える
0

この行を更新するだけです：

$('#contentWrap div:first').show();

これとともに：

$('#contentWrap div:first-child').show();

これが役立つかどうかを確認してください。

于 2012-11-05T10:35:01.110 に答える