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

Question

对此非常陌生...

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

我使用 jQuery 将 html 页面加载到带有选项卡系统的 iFrame 中。它们是这个的 2 个级别，因此在 iFrame 内的 html 中使用了类似的选项卡系统。问题是当我在原始页面上切换时，带有切换功能的 iFrame 中的 html 不会刷新到其初始状态。

Index.html > 有 |work| |联系方式| |简历|标签

在work.html中，它位于Index.html上的iframe内，它有一系列可用作标签的图像 所以如果你按一个标签说捉鬼敢死队，我的捉鬼敢死队投资组合 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>

Answer 1

您的解决方案有点复杂，但这里有一个解决您问题的方法。

// 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;
    });
});

Answer 2

这可能有效：

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