jquery ui tabs将display：none添加到iframe
[英]jquery ui tabs adding display:none to iframe
问题描述
I am using jQuery UI for tabs, the tabbed content is an iframe. 
我使用jQuery UI作为标签，标签内容是iframe。 The problem I have is either jQuery or jQuery UI is adding the display:none to the iframe as an inline style. 我遇到的问题是jQuery或jQuery UI将display：none添加到iframe作为内联样式。 How can I either stop that or add display:block after it does that? 我怎么能停止它或添加display：block之后呢？ I've tried many things and so far nothing works. 我尝试了很多东西，到目前为止没有任何作用。 Also, it works locally but when it's on a live server is when it happens. 此外，它可以在本地运行，但是当它在实时服务器上时就会发生。
This is the live site: http://gabriel-digital.com/banners.html 这是现场网站： 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 个解决方案
解决方案1
0 2019-03-21 17:23:04
这是由广告拦截器造成的，2小时后计算出来。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将图标添加到 jquery ui 选项卡 - adding icon to the jquery ui tabs
使用JQuery UI选项卡添加新选项卡 - Adding New Tab with JQuery UI tabs
在JQuery UI选项卡上添加下拉菜单 - Adding dropdown menu on JQuery UI tabs
jQuery UI-添加标签教程需要说明 - jQuery UI - adding tabs tutorial need explanation
将带有“Display:none”的 class 添加到元素在 jquery 中不起作用 - Adding a class with “Display:none” to an element is not working in jquery
带有 iframe 的 div，不显示 - div with iframe in it, display none
jQuery选项卡使用绝对位置而不是显示：无 - Jquery tabs use absolute position instead of display:none
jQuery选项卡显示：无隐藏所有内部div - jquery tabs display:none hiding all inner divs
通过jQuery悬停切换选项卡，添加删除类{display：none} - Switch tabs by jquery hover, add remove class{display:none}
jQuery UI选项卡仅在单击时加载iframe - Jquery ui tabs load iframe only when clicked
相关标签