JQuery:使用load()命令

时间:2010-09-20 21:33:50

标签: jquery load



网站查看错误(点击主页,型号等链接):http://bit.ly/9AE2RI



我正在尝试将#content-container其他页面加载到当前页面#content-container中。我可以做到这一点,但JQuery中的.load似乎是这样做的:

<div id=content-container style="display:block">
   <div id=content-container>
      OTHER PAGE CONTENT HERE
   </div>
</div>

因此,当我使用像#intent-container这样的透明背景时,它会创建2个背景,从而弄乱了透明度。它似乎也继承了#content-container的填充或边距,给它一个偏移量。

没有办法只占用#content-container的内部并将其加载到当前的#content-container中;如:

<div id=content-container>
      OTHER PAGE CONTENT HERE
</div>

此处的JQUERY代码:(取自http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/处的示例)

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#sub-navigation li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content-container';
            $('#content-container').load(toLoad)
        }                                           
    });

    $('#sub-navigation li a').click(function(){

        var toLoad = $(this).attr('href')+' #content-container';
        $('#content-container').hide('fast',loadContent);


        //$('#load').remove();
        //$('#wrapper').append('<span id="load">LOADING...</span>');
        //$('#load').fadeIn('normal');
        //window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content-container').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content-container').show('normal',hideLoader());
        }
        function hideLoader() {
            //$('#load').fadeOut('normal');
        }
        return false;

    });

});

请注意,评论将成为未来的特色。

2 个答案:

答案 0 :(得分:2)

设置toLoad变量时,添加所有子选择器,以便不获取父元素。

e.g。 -

var toLoad = $(this).attr('href')+' #content-container > *';

这样,toLoad var将只有#content-container

的子元素

或者,如果这对您不起作用,您可以在未添加到dom的元素上调用load,如下所示:

var $div = $("<div/>");
$div.load(toLoad);
$("#content-container").html($div.contents());

答案 1 :(得分:0)

将内容加载到变量/对象

像这样:

var contentContainerContent = $.load(toLoad,'','')

并将其添加到内容容器中,如此

$("#content-container").html(contentContainerContent);