1 
<!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 手风琴 div 中的 (h3) 选项卡，如何强制 iframe 显示。（由于某种原因，我的真实链接被隐藏并且没有显示。是的，这些虚拟链接（亚马逊、健康和其他正在显示，但在我的真实链接中它们被隐藏）？

4

1 回答 1

0

如果仅在显示其面板时尝试加载 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>
于 2013-08-15T10:07:27.620 回答