Question

<!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>

一旦用户点击jquery accordion div中的（h3）标签，如何强制显示iframe。（出于某种原因，我的真实情况链接是隐藏的而不是显示。对于这些虚拟链接是肯定的（亚马逊，健康和其他人正在显示，但在我的真实链接中它们被隐藏）？

Answer 1

如果仅在其面板显示时尝试加载Iframe，请尝试此

<强> http://jsfiddle.net/B4JGe/

<强> HTML 请注意，我在自定义属性中设置iframe src以防止在页面加载时加载

 <div id="accordion" style="width: 240px; height: 400px;">
            <h3>Rig Counts</h3>
            <div style="width: 238px; height: 270px;">
                <iframe name="I1" id="I1" data-src="http://placehold.it/200&text=1" 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" data-src="http://placehold.it/200&text=2" 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" data-src="http://placehold.it/200&text=3" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>   
            </div>

        </div>

<强> JS

 <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 showIframe(panel){
                $('iframe', panel).each(function(){
                    var iframe = $(this);
                    if(  iframe.attr('src')==undefined ) iframe.attr('src', iframe.data('src') );
                });
            };
            $(function() {
                // show first
                showIframe( $('#accordion div').eq(0)  );

                $( "#accordion" ).accordion({     
                    collapsible: true,
                    heightStyle: "content",
                    animate: {        
                        duration: 200,        
                        down: {            
                            easing: "easeOutBounce",            
                            duration: 1000        
                        }    

                    },
                     beforeActivate: function( event, ui ) {
                            // show iframes before panel to be activated
                            showIframe(ui.newPanel);
                     }
                });  
            }); 
        </script>

如何将iframe的显示样式从none更改为block：

1 个答案: