使用JavaScript/Tabs/Iframe重新加载动画

我有个问题。我使用jquery创建了4个选项卡，在每个选项卡上，我打开一个iframe，调用另一个html，其中包含带有css3动画的javascript代码

但是，这是我的问题。加载页面后，第一个选项卡已经“打开”，因此动画开始滚动。但是，当我更改选项卡或返回到第一个选项卡时，所有动画都已完成

我需要动画，只有当我打开选项卡时才开始，当我回到已经看到的另一个选项卡时，重新开始

由于css3代码和js太大，因此有指向我的工作（问题）选项卡的链接

附言：只适用于SAFARI（我就是这样做的，我只需要让它在SAFARI上工作）

谢谢

---

更新
好的，现在这就开始了，当我单击选项卡时，我在我的父代码中添加了以下内容：

function divStart1(){
            document.getElementById('teste1').contentWindow.start();
        };

        function divStart2(){
            document.getElementById('teste2').contentWindow.start();
        };

        function divStart3(){
            document.getElementById('teste3').contentWindow.start();
        };

        function divStart4(){
            document.getElementById('teste4').contentWindow.start();
        };

在html中，我添加了以下内容：

<a href="#tab1" onclick="divStart1();"><img src="img/001_a.png"></a>
            <a href="#tab2" onclick="divStart2();"><img src="img/002_b.png"></a>
            <a href="#tab3" onclick="divStart3();"><img src="img/003_b.png"></a>
            <a href="#tab4" onclick="divStart4();"><img src="img/004_b.png"></a>

但是，当我回到一个已经打开的选项卡时，它不会再做动画。。。。我现在可以改变什么

新代码url：

---

谢谢

如果将动画脚本移动到函数中，可以从父窗口调用该函数

/* This is in your child page */
function Animate(){
    // Do animation
    // To restart css animation I assume you have to remove a class and add it again?
}

$(document).ready(function(){
    Animate();
}

然后，当用户更改父窗口上的选项卡时，可以绑定事件

function OnTabSelected(){
    document.getElementById('ID of iframe here').contentWindow.Animate();
}

---

您需要将id添加到iFrame，以便使用此方法选择它们。

但我的动画脚本已经是一个名为start（）的函数。但是，所有4个选项卡的脚本都是一样的。。。会因为这个问题吗？（我的意思是，是同一个脚本，但使用不同的htmls）在这里，我按照你说的做，看一看，没有任何效果。。。。还是一样的问题…=/这似乎对我有用。动画仅在我显示选项卡时运行。剩下要做的就是在我离开选项卡时“重置”动画，以便在我返回时可以从头开始播放。