0

我遇到的问题在小提琴中。当我单击关于链接时，iframe 会随着文本淡入（文本在 about-me.html 文件中，我不知道如何将其包含在小提琴中，它只是简单的 h1 标题文本，下面有一个段落） ，但是当我单击 Portfolio 链接时，portfolio-me.html 中的文本仅出现在 iframe 中并且不会淡入。我希望 iframe 在单击 About 链接时与文本一起淡入，以及何时我单击 Portfolio 链接，我希望 iframe（以及 about-me.html 中的 About 文本）淡出并在 iframe 中淡出，并使用portfolio-me.html 等其他链接。请你帮我解决这个问题，解释一下，并包括此问题的其他解决方案并解释它们？我是 jquery 的初学者，我试图通过添加数据和卸载东西来解决它，但它没有用。先感谢您！

$(document).ready(function () {
    $(".about").on("click",function(){
        $('iframe').load(function() {
            $('#iframeContainer').fadeIn(1000);
        });
    });

    $(".about").on("click",".portfolio",function(){
        $("iframe").load(function(){
            $("iframeContainer").fadeOut(1000);
        });
    });
});

http://jsfiddle.net/VA6Hr/

4

1 回答 1

3

这应该适合你。请注意，我更改了一些 HTML 和 CSS 以改进代码。

HTML：

<ul class="bmenu">
    <li><a href="about-me.html" class="about">About</a></li>
    <li><a href="portfolio-me.html" class="portfolio">Portfolio</a></li>
    <li><a href="blog-me.html" class="blog">Blog</a></li>
    <li><a href="contact-me.html" class="contact">Contact</a></li>
</ul>

<div id="iframeContainer">
  <iframe src="" scrolling="no"></iframe>
</div>

CSS：

#iframeContainer { display: none; }

iframe {
    margin-left:100px;
    width:300px; height:300px;
    border: 1px solid #000; }

jQuery：

$(document).ready(function () {
    $('ul.bmenu a').click(function(){
        var iframeSrc = $(this).attr('href');
        $('#iframeContainer').fadeOut(1000,function(){
            $('#iframeContainer iframe').attr('src',iframeSrc);
            $('#iframeContainer').fadeIn(1000);
        });
        return false;
    });
});

小提琴：http: //jsfiddle.net/VA6Hr/1/

此代码使用链接 href 作为 iframe 的 src。

于 2013-08-15T13:14:25.847 回答