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

有一个像今天这样的有趣的 - 结果是它是图像文件本身的编码！尝试用烟花或者光影工作室或者gimp重新保存图像，或者看看会发生什么。

（很想说不要使用ie8然后;））

Answer 2

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

然后，您可以使用CSS简单地设置标签样式。它应该更快，更少侵入，实现的工作量要少得多。

Answer 3

想出来...... IE不会同时加载带有div的选项卡中的图像，所以我没有使用每个div的id的fadein（）函数，而是为每个div创建了一个类.tab和image在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;
    });
});

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

3 个答案: