0

我正在尝试在单击链接时获取一个网页来更改 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 页面旁边的根文件夹中。

投资组合内容.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 -->

任何此类帮助将不胜感激，因为我现在完全不知道问题可能是什么！

4

3 回答 3

2

将您的代码放入 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() 方法......但是，这将起作用。:)

于 2013-06-29T00:49:47.953 回答
1

你也可以使用

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

但是你必须转义"字符，\不要与 javascript 混合"

于 2013-06-29T03:24:05.920 回答
0

关于手动调用图像，在检查了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 选项。:)

于 2013-06-29T10:52:49.930 回答