1

このスクリプトを使用して、別の div 内の div のコンテンツをロードしていますが、この div の背景色のプロパティが読み込まれていません。

ここに私のコード：

私のメニュー:

<nav class="navegacao">
    <ul id="menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#empresa">Empresa</a></li>
        <li><a href="#gallery_wrapper">Coleções</a></li>
        <li><a href="#encotre">Encontre</a></li>
        <li><a href="#diferenciais">Diferenciais</a></li>
        <li><a href="#marketing">Marketing</a></li>
    </ul>
</nav>

ここに私のコンテンツ div 受信者:

<div class="wrapper">
<!--content-->
<section id="content_wrapper">
    <div id="content">
        <div id="splash"></div>
    </div>
</section>
 <!--content end-->
</div>

ここに私の隠しdiv：

<div id="home">TESTE</div>

ここに私のCSS：

#content_wrapper > #content {
    padding: 48px 78px 30px 78px;
    margin: 135px 0 0 0;
    position: absolute;
    height: 372px;
    width: 791px;
    /*background:#fff;*/
    border-radius: 10px;
    overflow: hidden;
}

#home{
    width:500;
    height:500px;
    background:#FFCC00;
    display:none;
}

そして、ここに私のスワップコンテンツコード:

$(function() {
        $('#menu a').click(function(e) {
            e.preventDefault();
            var h = $(this).attr('href');
            $("#content").fadeOut("slow", function() {
                $(this).html($(h).html()).fadeIn("slow");
            });
            //alert(h);
        });
    });

これを機能させる方法は？

OBS: 問題のある作業リンクは次のとおりです: http://www.alsite.com.br/sapatoterapia/

4

4 に答える 4

1

#home のスタイルを #content に読み込もうとしている問題に気付きました - まあ、これはうまくいきません... #home のスタイルは、ID が home の要素のみに適用されます... これで、home からのコンテンツができました#content コンテナで..

あなたはこれを試すことができます

var h = $("#home").detach(); // remove the element from the dom... maybe?? but you will now have to re-attach it when you're switching to a new page.
$(this).html("").append(h).fadeIn("slow");
于 2012-06-19T17:55:32.830 に答える
0

この行を変更しますか

$(this).html($(h).html()).fadeIn("slow");

に

$(this).html($(h).wrap('<div />').parent().html()).fadeIn("slow");

このcssを追加します

#content > div{
   display:block !important;
}

ヘルプ ？

于 2012-06-19T18:20:01.243 に答える
0

使用すると、HTML 自体ではなくHTMLを$(h).html()取得します。そこに完全に隠れたダイビングが必要な場合は、次を試してください。<div><div>

$(function() {
    $('#menu a').click(function(e) {
        e.preventDefault();
        var h = $($(this).attr('href'));
        h.remove().css('display','block');
        $("#content").fadeOut("slow", function() {
            $(this).html($(h)).fadeIn("slow");
        });
    });
});

編集:h実際にjQueryオブジェクトになるように変更し、DOMから削除して、表示をに設定しました(cssでblock設定されているため)。noneそうすれば、それを再度追加すると、それがページ上の唯一の ID になり (一意に保持されます)、表示されるはずです。

あなたがやっていることのためにそれを試してみるためにもう一度編集してください: 非表示の div を content div の中に入れてみませんか。

<div id="content">
    <div id="splash"></div>
    <div id="home"></div>
    ...
</div>

彼らがいるので、display:noneあなたはまだあなたが望む外観を得るでしょう. 次に、コード内で、実際に物を移動するのではなく、非表示/表示するだけです。

$(function() {
    $('#menu a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $("#content").fadeOut("slow", function() {
            $(this).find('div').hide().siblings(h).fadeIn("slow");
        });
    });
});

ユーザーがリンクをクリックすると、コンテンツがフェードアウトし、内部のすべての div が非表示になり、クリックに関連付けられた div がフェードインします。

于 2012-06-19T17:57:04.370 に答える
0

これは jQuery の問題ではなく、CSS の問題です。CSS を使用して、新しいホームで div のスタイルを設定するか、 div と一緒に移動するインライン スタイルを使用する必要がありますstyle="background:someColor"。

問題の一部は、同じプロパティで新しい div を作成するのではなく、#homeのコンテンツのみを取得することです。$(h).clone()代わりにショットを与える$(h).html()

于 2012-06-19T19:23:53.787 に答える