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

当您使用时，$(h).html()您会在其中获得 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（因为它none在 css 中设置为）。这样，当您将其重新添加时，它是页面上的唯一 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，然后淡入与点击关联的那个。

于 2012-06-19T17:57:04.370 回答
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

这是一个 CSS 问题而不是 jQuery 问题。您需要使用 CSS 在其新主页中设置 div 的样式，或者使用将与 div 一起移动的内联样式style="background:someColor"。

部分问题是您只获得了#home的内容，而不是创建具有相同属性的新 div。试一试$(h).clone()，而不是$(h).html()

于 2012-06-19T19:23:53.787 回答