jQuery UI选项卡将display:none添加到iframe

时间:2019-03-21 16:40:01

标签: javascript jquery html jquery-ui

我将jQuery UI用于标签,标签化的内容是iframe。我的问题是jQuery或jQuery UI将display:none作为内联样式添加到iframe中。我该如何停止它或在其之后添加display:block?我已经尝试了很多事情,但到目前为止没有任何效果。此外,它可以在本地运行,但是在实时服务器上运行时才发生。

这是实时站点:http://gabriel-digital.com/banners.html

<!DOCTYPE html>
<html>
    <head>
        <title>Gabriel Ramirez - Site Under Renovation</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" href="assets/jquery-ui/jquery-ui.min.css" rel="stylesheet">
        <link type="text/css" href="assets/jquery-ui/jquery-ui.structure.css" rel="stylesheet">
        <link type="text/css" href="assets/jquery-ui/jquery-ui.theme.css" rel="stylesheet">
        <link type="text/css" href="assets/styles.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    </head>

    <body id="banners">
        <div class="container text-center" id="error">
            <div class="row">
                <div class="col-md-12">
                    <!-- Tabs -->
                    <h2 class="demoHeaders">Web Banners</h2>
                    <h3>Clicking on the tab will refresh the animation.</h3>
                    <div id="tabs">
                        <ul class="left-nav">
                            <li><a href="#tabs-1">Lemonade</a></li>
                            <li><a href="#tabs-2">Emoji</a></li>
                            <li><a href="#tabs-3">Souvenir</a></li>
                            <li><a href="#tabs-4">DiaResQ</a></li>
                            <li><a href="#tabs-5">Love Me</a></li>
                        </ul>
                        <div id="tabs-1">
                            <div id="tabs-content-1">
                                <ul>
                                    <li><a href="#tabs-1-1">300 x 250</a></li>
                                </ul>
                                <div id="tabs-1-1">
                                    <iframe id="I1" src="banners/lemonade-300x250/index.html" width="300" height="250"></iframe>
                                </div>
                            </div>
                        </div>
                        <div id="tabs-2">
                            <div id="tabs-content-2">
                                <ul>
                                    <li><a href="#tabs-1-2">160 x 600</a></li>
                                    <li><a href="#tabs-2-2">300 x 250</a></li>
                                    <li><a href="#tabs-3-2">300 x 600</a></li>
                                    <li><a href="#tabs-4-2">320 x 50</a></li>
                                    <li><a href="#tabs-5-2">728 x 90</a></li>
                                    <li><a href="#tabs-6-2">970 x 250</a></li>
                                </ul>
                                <div id="tabs-1-2">
                                    <iframe id="I2" src="banners/emoji-160x600/index.html" width="160" height="600"></iframe>
                                </div>
                                <div id="tabs-2-2">
                                    <iframe id="I3" src="banners/emoji-300x250/index.html" width="300" height="250"></iframe>
                                </div>
                                <div id="tabs-3-2">
                                    <iframe id="I4" src="banners/emoji-300x600/index.html" width="300" height="600"></iframe>
                                </div>
                                <div id="tabs-4-2">
                                    <iframe id="I5" src="banners/emoji-320x50/index.html" width="320" height="50"></iframe>
                                </div>
                                <div id="tabs-5-2">
                                    <iframe id="I6" src="banners/emoji-728x90/index.html" width="728" height="90"></iframe>
                                </div>
                                <div id="tabs-6-2">
                                    <iframe id="I7" src="banners/emoji-970x250/index.html" width="970" height="250"></iframe>
                                </div>
                            </div>
                        </div>
                        <div id="tabs-3">
                            <div id="tabs-content-3">
                                <ul>
                                    <li><a href="#tabs-1-3">160 x 600</a></li>
                                    <li><a href="#tabs-2-3">300 x 250</a></li>
                                    <li><a href="#tabs-3-3">300 x 600</a></li>
                                    <li><a href="#tabs-4-3">320 x 50</a></li>
                                    <li><a href="#tabs-5-3">728 x 90</a></li>
                                    <li><a href="#tabs-6-3">970 x 250</a></li>
                                </ul>
                                <div id="tabs-1-3">
                                    <iframe id="I8" src="banners/souvenir-160x600/index.html" width="160" height="600"></iframe>
                                </div>
                                <div id="tabs-2-3">
                                    <iframe id="I9" src="banners/souvenir-300x250/index.html" width="300" height="250"></iframe>
                                </div>
                                <div id="tabs-3-3">
                                    <iframe id="I10" src="banners/souvenir-300x600/index.html" width="300" height="600"></iframe>
                                </div>
                                <div id="tabs-4-3">
                                    <iframe id="I11" src="banners/souvenir-320x50/index.html" width="320" height="50"></iframe>
                                </div>
                                <div id="tabs-5-3">
                                    <iframe id="I12" src="banners/souvenir-728x90/index.html" width="728" height="90"></iframe>
                                </div>
                                <div id="tabs-6-3">
                                    <iframe id="I13" src="banners/souvenir-970x250/index.html" width="970" height="250"></iframe>
                                </div>
                            </div>
                        </div>
                        <div id="tabs-4">
                            <div id="tabs-content-4">
                                <ul>
                                    <li><a href="#tabs-1-1">970 x 250</a></li>
                                </ul>
                                <div id="tabs-1-4">
                                    <iframe id="I14" src="banners/diaresq-970x250/index.html" width="970" height="250"></iframe>
                                </div>
                            </div>
                        </div>
                        <div id="tabs-5">
                            <div id="tabs-content-5">
                                <ul>
                                    <li><a href="#tabs-1-5">160 x 600</a></li>
                                    <li><a href="#tabs-2-5">300 x 250</a></li>
                                    <li><a href="#tabs-3-5">300 x 600</a></li>
                                    <li><a href="#tabs-4-5">320 x 50</a></li>
                                    <li><a href="#tabs-5-5">970 x 90</a></li>
                                </ul>
                                <div id="tabs-1-5">
                                    <iframe id="I15" src="banners/ks-160x600/index.html" width="160" height="600"></iframe>
                                </div>
                                <div id="tabs-2-5">
                                    <iframe id="I16" src="banners/ks-300x250/index.html" width="300" height="250"></iframe>
                                </div>
                                <div id="tabs-3-5">
                                    <iframe id="I17" src="banners/ks-300x600/index.html" width="300" height="600"></iframe>
                                </div>
                                <div id="tabs-4-5">
                                    <iframe id="I18" src="banners/ks-320x50/index.html" width="320" height="50"></iframe>
                                </div>
                                <div id="tabs-5-5">
                                    <iframe id="I19" src="banners/ks-970x90/index.html" width="970" height="90"></iframe>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <script src="assets/site.js"></script>
        <script>
            // $( "#accordion" ).accordion();
            $( "#tabs, #tabs-content-1, #tabs-content-2, #tabs-content-3, #tabs-content-4, #tabs-content-5" ).tabs();
            $( function() {
                $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
                $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
            } );    
        </script>           
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

这是由广告拦截器引起的,在2个小时后就发现了。