【发布时间】：2019-03-21 16:40:00
【问题描述】：
我正在为标签使用 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>
【问题讨论】：
-
你调用了两次标签。你这样做有什么特别的原因吗？我正在玩弄你的代码，我发现如果我注释掉你注释掉的手风琴行下方的行，它不会添加那些 display:none 样式。
-
感谢您发现这一点，我将在第一次通话中删除#tabs 的那个。我正在使用第二个来使标签垂直。
标签： javascript jquery html jquery-ui