使用jQuery选项卡刷新加载到iframe中的html

非常新…

我的网站http://www.daveknispel.com.au是我有问题的地方。

我使用jQuery将html页面加载到带有标签系统的iframe中。这有两个级别，所以在iFrame内的html中使用了类似的选项卡系统。问题是当我在原始页面上切换时，iFrame中的html与切换不会刷新到其初始状态。

Index.html> has |work| |contact| |resume| tabs

在work.html中，位于index.html的iframe中，它有一系列作为标签的图像所以如果你按下TAB键，比如ghostbuster，我的ghostbusters作品集HTML就会出现在框架内。

如果现在你再次按下|work|我想让iframe重置为原来的work.html

不确定这是否清楚，但希望。

// JavaScript Document
$("document").ready(function(){
        $('#content > div').hide();
        $('#content div:first').show();
        $('.nav-wrapper ul li:first').addClass('active');
        $('.nav-wrapper ul li a').click(function(){
        $('.nav-wrapper ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#content > div').hide();
        $(currentTab).fadeIn(400).fadeIn('slow');
        return false;
        });
});

//index . html

 <div class="nav-wrapper">
<div class="menu">
   <ul>
     <li><a class="fill-div" href="#work"  onclick="work.html.refresh"><h2>work</h2></a></li>
     <li><a class="fill-div" href="#about"><h2>about/contact</h2></a></li>
     <li><a class="fill-div" href="#resume"><h2>resume</h2></a></li>
   </ul>
</div> 
   <div id="content">
   <div id="work">
   <iframe src="work.html" width="860px" height="1380px" frameborder="0" scrolling="no" seamless></iframe>
   </div>
   <div id="about">
   <iframe src="about.html" width="860px" height="1500px" frameborder="0" scrolling="no" seamless></iframe>
   </div>
   <div id="resume">
   <iframe src="resume.html" width="860px" height="1216px" frameborder="0" scrolling="no" seamless></iframe>
   </div>

   </div>
</div>

//work.html

    <div class="nav-wrapper">
<div id="content">
<div class="menu2">
<ul>
<div class="frameProject">
<li><a class="fill-div" href="#metro">
<img src="img/metro.jpg" alt="Metropolitan Hotel">
<h3> Metropolitan Hotel </h3></a></li>
<h4> Web, Print & Digital </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#ghostbusters">
<img src="img/ghostbusters.jpg" alt="Ghostbusters">
<h3> Ghostbusters </h3></a></li>
<h4> Title Sequence </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#uep">
<img src="img/uep.jpg" alt="UEP Pty. Ltd.">
<h3> UEP </h3></a></li>
<h4> Website & Build </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#science">
<img src="img/science.jpg" alt="Science Q and A">
<h3> Science Q and A </h3></a></li>
<h4> Logo Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#gonski">
<img src="img/gonski.jpg" alt="Gonski Review">
<h3> Gonski Review </h3></a></li>
<h4> Infographic Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#mylife">
<img src="img/mylife.jpg" alt="My Life Network">
<h3> My Life Network </h3></a></li>
<h4> Logo & Web Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#gameandwatch">
<img src="img/gameandwatch.jpg" alt="Game and Watch"> 
<h3> Game and Watch </h3></a></li>
<h4> Design & Programming </h4> 
</div>
<div class="frameProject">
<li><a class="fill-div" href="#barnbrook">
<img src="img/barnbrook.jpg" alt="Barnbrook">
<h3> Jonathon Barnbrook </h3></a></li>
<h4> Poster Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#cerberus">
<img src="img/cerberus.jpg" alt="Cerberus">
<h3> Cerberus v Hercules </h3></a></li>
<h4> Design </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#whenjooturns">
<img src="img/joo.jpg" alt="When Joo Turns">
<h3> When Joo Turns </h3></a></li>
<h4> Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#allstar">
<img src="img/afl.jpg" alt="All Star Karaoke">
<h3> All Star Karaoke </h3></a></li>
<h4> Animation </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#iamlife">
<img src="img/iamlife.jpg" alt="I am Life - Film">
<h3> I am Life Film </h3></a></li>
<h4> Assistant Director </h4>
</div>
<div class="frameProject">
<li><a class="fill-div" href="#owlfarm">
<img src="img/owl.jpg" alt="Owl Farm">
<h3> Owl Farm </h3></a></li>
<h4> Logo Design </h4>
</div>
</ul>
</div>

   <div id="metro">
   <iframe src="metro.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="ghostbusters">
   <iframe src="ghostbusters.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="uep">
   <iframe src="uep.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="science">
   <iframe src="science.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="gonski">
   <iframe src="gonski.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>

   <div id="mylife">
   <iframe src="mylife.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="gameandwatch">
   <iframe src="gameandwatch.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="barnbrook">
   <iframe src="barnbrook.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="cerberus">
   <iframe src="cerberus.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="whenjooturns">
   <iframe src="whenjooturns.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="allstar">
   <iframe src="allstar.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>

   <div id="iamlife">
   <iframe src="iamlife.html" width="840px" height="1150px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>
   <div id="owlfarm">
   <iframe src="owlfarm.html" width="840px" height="1216px" frameborder="0" scrolling="yes" seamless></iframe>
   </div>


  </div>
</div>

// JavaScript Document
$("document").ready(function(){
    $('#content > div').hide();
    $('#content div:first').show();
    $('.nav-wrapper ul li:first').addClass('active');
    $('.nav-wrapper ul li a').click(function(){
    $('.nav-wrapper ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#content > div').hide();
    // Added lines. Reset the iframe src to reload the original contents of the iframe.
    var iframe = $(currentTab).find('iframe').get(0);
    iframe.src = iframe.src;
    $(currentTab).fadeIn(400).fadeIn('slow');        
    return false;
    });
});

$( "#tabs" ).tabs( "refresh" );