iframe不能用手风琴工作

时间:2013-08-14 10:54:00

标签: jquery iframe accordion

我从最新的参考资料中获取了以下脚本。在jquery。

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<script type="text/jscript" src="java/jquery-1.9.1.js"></script>
<script type="text/jscript" src="java/jquery-ui.min.js"></script>

我的错误在哪里?我尽力修复它,但没有成功。

<script type="text/jscript">  
$(function() {
$( "#accordion" ).accordion({     
collapsible: true,
heightStyle: "content",
animate: {        
    duration: 200,        
    down: {            
    easing: "easeOutBounce",            
    duration: 1000        
    }    
    }
});  
}); 
</script>

</head>

<body>

我们从这里开始。 我只是为了澄清而放了一些虚拟链接。我希望这很清楚。

<div id="accordion" style="width: 240px; height: 400px;">

<h3>Rig Counts</h3>
<div style="width: 238px; height: 270px;">
    <iframe name="I1" id="I1" src="https://amazon.com" frameborder="0"  width="100%" height="100%" scrolling="no">
        </iframe>   </div>

<h3>Lost Time</h3>
    <div style="width: 238px; height: 270px;">
    <iframe name="I2" id="I2" src="http://ebay.com" frameborder="0" width="100%" height="100%" scrolling="no"></iframe> </div>

<h3>Rate Of Penetration</h3>
    <div style="width: 238px; height: 270px;">
    <iframe name="I3" id="I3" src="https://yahoo.com" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>   </div>

<h3>No Of Incident</h3>
    <div style="width: 238px; height: 270px;">
    <iframe name="I4" id="I4" src="https://google.com" frameborder="0" width="100%" height="100%" scrolling="no">
        </iframe>   </div>


</div>

</body>

</html>

1 个答案:

答案 0 :(得分:1)

问题似乎与你的javascript引用有关。它应该是

type="text/javascript" language="javascript"

是的我是对的,试试这段代码:

<!DOCTYPE HTML>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
            <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
            <script type="text/javascript" language="javascript">  
                $(function() {
                    $( "#accordion" ).accordion({     
                        collapsible: true,
                        heightStyle: "content",
                        animate: {        
                            duration: 200,        
                            down: {            
                                easing: "easeOutBounce",            
                                duration: 1000        
                            }    
                        }
                    });  
                }); 
            </script>
        </head>
        <body>
            <div id="accordion" style="width: 240px; height: 400px;">
                <h3>Rig Counts</h3>
                <div style="width: 238px; height: 270px;">
                    <iframe name="I1" id="I1" src="https://amazon.com" frameborder="0"  width="100%" height="100%" scrolling="no">
                    </iframe>   
                </div>
                <h3>Lost Time</h3>
                <div style="width: 238px; height: 270px;">
                    <iframe name="I2" id="I2" src="http://ebay.com" frameborder="0" width="100%" height="100%" scrolling="no"></iframe> 
                </div>
                <h3>Rate Of Penetration</h3>
                <div style="width: 238px; height: 270px;">
                    <iframe name="I3" id="I3" src="https://yahoo.com" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>   
                </div>
                <h3>No Of Incident</h3>
                <div style="width: 238px; height: 270px;">
                    <iframe name="I4" id="I4" src="https://google.com" frameborder="0" width="100%" height="100%" scrolling="no">
                    </iframe>   
                </div>
            </div>
        </body>
    </html>