Question

我正在尝试通过点击链接获取一个更改div #portfolioWork内容的网页，我尝试过以前在此处发布的脚本，但是没有这样的运气，即使在切换之后id被称为。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>



<script>
$('#GFXWork').click(function(){
    $('#portfolioWork').load('portfolioContent.html #motionGraphics');
}
</script>


<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a href="#">Compositing</a></li>
<li id="portfolio-animation"><a href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a href="#">3D</a></li>
</ul>
</nav>

<div id="portfolioWork">

<div id='Portfolio3D'>
<a class="fancyYoutube" href="http://www.youtube.com/watch?v=rATNlIvsOWk">
<figcaption id="BikeRender">
<div class="captiontitle">3D Ident to Music</div>
<p class="maincaption">Apply attractive visuals to a short soundtrack to create an ident. Explore 3D particle systems and other simulation techniques to work towards the final outcome.</p>
<p class="captionFooter">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/ident2Small.png"/></a>

<a class="fancyYoutube" href="Images/3DBikeLarge.png">
<figcaption id="BikeRender">
<div class="captiontitle">Rendering Techniques</div>
<p class="maincaption">Use reference materials to accurately texture a 3D bicycle model and light it to products standards. Composite the render outcomes to achieve quality images.</p>
<p class="captionFooter">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/3DBikeSmall.png"/></a>

<a class="fancyChurch" rel="churchPoster" href="Images/PosterChurchLarge.png">
<figcaption id="ChurchRender">
<div class="captiontitle">Realistic Modelling</div>
<p class="maincaption">Gather reference materials in order to create a full 3D replica of a local building. Using a wide range of modelling techniques, add lights, textures and shaders for a complete effect.</p>
<p class="captionFooterChurch">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/3DChurchSmall.png"/>
<a class="fancyChurch2" rel="churchPoster" href="Images/PosterChurch_AO.png">
</a>
</div> <!-- End of 3DWork -->
</div> <!-- End of PortfolioWork

我应该链接到名为portfolioContent.html的html文件，该文件位于portfolio.html页面旁边的根文件夹中。

portfolioContent.html：

<div id="motionGraphics">
<a class="fancyYoutube" href="http://www.youtube.com/watch?v=rATNlIvsOWk">
<figcaption id="BikeRender">
<div class="captiontitle">3D Ident to Music</div>
</figcaption>
<img src="Images/ident2Small.png"/></a>

<a class="fancyYoutube" href="Images/3DBikeLarge.png">
<figcaption id="BikeRender">
<div class="captiontitle">Rendering Techniques</div>
<p>BLAAAAAAAAAAAH</p>
</figcaption>
<img src="Images/3DBikeSmall.png"/></a>

<a class="fancyChurch" rel="churchPoster" href="Images/PosterChurchLarge.png">
<figcaption id="ChurchRender">
<div class="captiontitle">Realistic Modelling</div>
<p class="maincaption">Gather reference materials in order to create a full 3D replica of a local building. Using a wide range of modelling techniques, add lights, textures and shaders for a complete effect.</p>
<p class="captionFooterChurch">Autodesk Maya and Adobe Photoshop were used.</p>
</figcaption>
<img src="Images/3DChurchSmall.png"/>
<a class="fancyChurch2" rel="churchPoster" href="Images/PosterChurch_AO.png">
</a>
</div> <!-- End of motionGraphcs -->

任何这样的帮助都会受到高度赞赏，因为我现在已经完全迷失了问题所在！

Answer 1

将您的代码放入DOM准备就绪：http://api.jquery.com/ready/

<script type="text/javascript">
$(document).ready(function() {

    $('#GFXWork').click(function(){
        $('#portfolioWork').load('portfolioContent.html #motionGraphics');
    });

});
</script>

由于您使用旧版本的JQuery，请将此代码用于fancybox：

$('.fancyYoutube').live('click',function(){

$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true
}
});
return false;
});
$("a[rel=churchPoster]").fancybox({
        'interval'          :  2500,
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'showNavArrows'     : 'true',  
        'width'             :  680,
        'height'            :  395
    });

但是，不推荐使用live（）：http://api.jquery.com/live/，也许你可以更新JQuery，而使用on（） - 而不是。我可以看到他们推荐旧版本的delegate（）方法......但是，这将有效。：）

Answer 2

您也可以使用

$(function(){
    $('#GFXWork').click(function(){
        $('#portfolioWork').append('Place your code here');
    });
});

但是您必须使用"转义\个字符，不要与javascript "

混在一起

Answer 3

关于手动调用图像，检查fancybox手动调用示例（有时，仔细阅读手册/文档是好事:)），这里是解决方案：

$(document).ready(function() {

// in your case $(".fancyChurch").live('click',function() {

    $("#fancyChurch").live('click',function() {

        $.fancybox({
            'interval'          :  2500,
            'transitionIn'      : 'elastic',
            'transitionOut'     : 'elastic',
            'showNavArrows'     : 'true',  
            'width'             :  680,
            'height'            :  395,
            'href'              : 'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg' //path to your church image


        });    
        return false;
    });
});

所以，当你手动调用图像时，正如他们所说 - 应该提供href选项。：）

链接点击更改div内容

3 个答案: