IE 中的 JQuery 选项卡不显示图片

Question

我遇到的问题是我的图片不会显示在 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;}

Answer 1

今天有一个有趣的事情 - 结果是图像文件本身的编码！尝试使用 fireworks、photoyshop、gimp 或其他工具重新保存图像，看看会发生什么。

（当时很想说不要使用 ie8 ；））

Answer 2

有一个更好的方法可以做到这一点。使用 JQuery UI 的选项卡。 它可以原生处理常见的缓慢加载场景、浏览器差异和 FOUC 问题带有选项卡式菜单解决方案。

然后，您可以使用 CSS 简单地设置选项卡的样式。它应该更快、更少干扰，并且需要实施的工作也显着减少。

Answer 3

想通了... IE 不会同时加载选项卡中的图像和 div，因此我没有使用 fadein() 函数和每个 div 的 id，而是为每个 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;
    });
});