IE中不显示图片的JQuery选项卡
IE中不显示图片的JQuery选项卡
提问于 2011-04-05 23:16:12
我遇到的问题是，我的图片不会显示在IE8和下面的动态JQuery选项卡中，但它们会显示在所有其他浏览器中。我相信这与如何使用JQuery加载选项卡有关，因为当我不加载代码时，图片显示得很好。我使用了JQuery .hide()和fadeIn()函数来更改选项卡。
下面是我正在讨论的屏幕截图：http://www.marinicorp.net/jquerytabs.htm
这是一个指向网页本身的链接：http://www.marinicorp.net/services.aspx
如果你需要更多的信息，请告诉我。
JQuery：
$(document).ready(function () {
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("selected").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabNavigation li").click(function () {
$("ul.tabNavigation li").removeClass("selected"); //Remove any "active" class
$(this).addClass("selected"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});})；
HTML：
<div id="tabs" class="tabs">
<ul class="tabNavigation">
<li><a href="#tabCon">Construction Services</a></li>
<li><a href="#tabLand">Landscaping Services</a></li>
<li><a href="#tabSnow">Plowing Services</a></li>
</ul>
<div id="tabCon" class="tab_content">
<table style="position: absolute; top:35px; left:40px;">
<tr>
<td><img class="tables" src="Images/pipeLay.gif" /></td>
<td><img class="tables" src="Images/projMan.gif" /></td>
<td><img class="tables" src="Images/surveyeng.gif" /></td>
</tr>
</table>
</div>
<div id="tabLand" class="tab_content">
<table style=" position: absolute; left:40px; top:35px;"> <tr>
<td ><img class="tables" src="Images/playGrounds.gif" /></td>
<td><img class="tables" src="Images/plantTrees.gif" /></td>
<td><img class="tables" src="Images/genLand.gif" /></td>
</tr>
</table>
</div>
<div id="tabSnow" class="tab_content">
<table style=" position: absolute; left:40px; top:35px;">
<tr>
<td><img class="tables" src="Images/snowplow.gif" /></td>
<td><img class="tables" src="Images/shovelers.gif" /></td>
<td><img class="tables" src="Images/bobcat.gif" /></td>
</tr>
</table>
</div>
</div>CSS：
.tab_content {padding: 19px 0 22px 16px}
#tabs{top:380px;left:-10px;position: absolute; z-index:3;}
#tabs .tables{margin: 0px 13px 0px 13px;padding: 0px;border: 2px outset #999999;z- index:-1;}
UL.tabNavigation{list-style: none; margin: 0;padding: 0;}
UL.tabNavigation LI{display: inline;}
UL.tabNavigation LI A{padding: 10px 20px 10px 20px;background-color: #C0C0C0;text decoration: none;font-size: 12pt;color: #000000;font-family: Tahoma;}
UL.tabNavigation LI A.selected, UL.tabNavigation LI A:hover{border width:0px;background-color: #C0C0C0;padding: 10px 20px 13px 20px;color: #FFFFFF;font-size: 12pt;}
UL.tabNavigation LI A:focus {outline: 0;}
div.tabs > div{padding: 5px;margin-top: 11px;width: 620px;height: 330px;}
div.tabs > div h2 {margin-top: 0;}
#tabCon{background-color: #C0C0C0;}
#tabLand{background-color: #C0C0C0;}
#tabSnow{background-color: #C0C0C0;}
.waste {min-height: 1000px;}回答 3
Stack Overflow用户
发布于 2011-04-06 00:13:08
今天有一个很有趣的例子--原来是图像文件本身的编码！尝试使用fireworks或photyshop或gimp或其他工具重新保存图像，看看会发生什么。
(我很想说不要使用ie8 ;)
Stack Overflow用户
发布于 2011-04-06 00:09:28
有一种更好的方法可以做到这一点。使用JQuery UI's tabs.它本机处理加载缓慢的情况，浏览器差异，以及选项卡式菜单解决方案中常见的FOUC问题。
然后，您可以简单地使用CSS设置选项卡的样式。它应该更快，侵入性更小，需要实现的工作要少得多。
Stack Overflow用户
发布于 2011-04-08 00:32:04
弄清楚了..。IE不会同时加载带有div的选项卡中的图像，所以我没有对每个div的id使用fadein()函数，而是为每个div.tab和选项卡中的图像创建了一个类，这些类在JQuery调用该类时都会淡入。
代码如下：
HTML：
<div id="tabs" class="tabs">
<ul class="tabNavigation">
<li><a href="#tabLand" name=".tabLand">Landscaping Services</a></li>
<li><a href="#tabCon" name=".tabCon">Construction Services</a></li>
<li><a href="#tabSnow" name=".tabSnow">Plowing Services</a></li>
</ul>
<div id="tabLand" class="tabLand">
<table style="position: absolute; left:40px; top:35px;">
<tr>
<td><img class="tabLand" src="Images/playGrounds.jpg" /></td>
<td><img class="tabLand" src="Images/plantTrees.jpg" /></td>
<td><img class="tabLand" src="Images/genLand.jpg" /></td>
</tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div id="tabCon" class="tabCon">
<table style=" position: absolute; left:40px; top:35px;"> <tr>
<td ><img class="tabCon" src="Images/pipeLay.jpg" /></td>
<td><img class="tabCon" src="Images/projMan.jpg" /></td>
<td><img class="tabCon" src="Images/surveyeng.jpg" /></td>
</tr>
<tr><td></td><td></td></tr>
</table>
</div>
<div id="tabSnow" class="tabSnow">
<table style=" position: absolute; left:40px; top:35px;">
<tr>
<td><img class="tabSnow" src="Images/snowplow.jpg" /></td>
<td><img class="tabSnow" src="Images/shovelers.jpg" /></td>
<td><img class="tabSnow" src="Images/bobcat.jpg" /></td>
</tr>
<tr><td></td><td></td></tr>
</table>
</div>
</div>JQuery：
$(document).ready(function () {
var tabArray = new Array();
tabArray[0] = ".tabCon";
tabArray[1] = ".tabLand";
tabArray[2] = ".tabSnow";
var p = tabArray.length;
//When page loads...
for (x = 0; x < p; x++) {
$(tabArray[x]).hide();
}
$("ul.tabNavigation li:first").addClass("selected").show(); //Activate first tab
var firstTab = $("ul.tabNavigation li:first").find("a").attr("name"); //Show first tab content
$(firstTab).show();
//On Click Event
$("ul.tabNavigation li").click(function () {
var clearTab = $("ul.tabNavigation li.selected").find("a").attr("name");
$("ul.tabNavigation li").removeClass("selected"); //Remove any "active" class
$(clearTab).hide(); //Hide all tab content
$(this).addClass("selected"); //Add "active" class to selected tab
var activeTab = $(this).find("a").attr("name"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5554201
复制相关文章
相似问题
腾讯云开发者
