Question

我正在使用此脚本在另一个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 recipien：

<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;
}

这是我的Swap内容代码：

$(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/

Answer 1

好的所以我刚刚意识到你的问题是你试图将#home的风格加载到#content中 - 这不会起作用... #home的样式仅适用于ID为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");

Answer 2

当您使用$(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中移除并将其显示设置为block（因为它在css中设置为none）。这样当你将它追加回来时，它就是页面上唯一的ID（保持唯一）并且它应该是可见的。

再次编辑尝试使其适用于您正在做的事情：为什么不将隐藏的div放在内容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，然后淡入与点击相关联的内容。

Answer 3

更改此行

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

到

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

并添加此css

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

帮助？

Answer 4

这是一个CSS问题而不是jQuery问题。您需要使用CSS在其新主页 OR 中设置div的样式，并使用div style="background:someColor"行进的内联样式。

问题的一部分是你只获得#home的 CONTENTS ，而不是使用相同的属性创建一个新的div。给$(h).clone()一个而不是$(h).html()

.html（）无法从div加载背景颜色？

4 个答案: