IE中的jquery显示问题

我有一种在jquery中构建的“tab”解决方案。当用户点击一个标签时，我会得到该标签的ID，并根据该标识显示该标签的正确内容。它在Firefox中非常完美，当单击该选项卡时，它会隐藏所有具有类“页面”的div，然后显示正确的页面。IE中的jquery显示问题

在IE8中它也以相同的方式工作，但是一个奇怪的事情发生，有时一些其他页面的内容显示在活动页面的内容上。所以如果我点击Tab1，它会显示Page1的有效性，但Page2中的真棒按钮也会显示出来。当把鼠标拖到不应该出现的真棒按钮上时，它会消失，所以它看起来像是一种“图形/显示”问题。它不会一直发生，有时它会像它应该那样工作。

有没有人看到过这样的问题，是否有解决方案？

这是jQuery的代码中，HTML和CSS：

$(document).ready(function() { 

$('.Pages').hide(); 

$('.Tab').click(function() { 
    var isActive = $(this).hasClass('TabActive'); 
    var pages = $(this).closest('div').prev('div'); 
    var tabs = $(this).closest('div'); 
    $(".Page").hide(); 
    $(".Page").css({ 'z-index:': '0' }); 
    $(".Tab").removeClass('TabActive') 


    //Toggle Open/Close 
    if (isActive || pages.is(":hidden")) { 
     pages.animate({ width: "toggle" }, 200); 
    } 

    //Show the content 
    var id = this.id.substring(3, 4); 
    $('#Page' + id).show(); 
    $("#Page" + id).css({ 'z-index:': '999'}); 

    //Mark the tab as active 
    if (!isActive) { 
     $(this).addClass('TabActive'); 
    } 
}); 
});

HTML：

<div class="Pages"> 
    <div id="Page1" class="Page"> 
     Content 1 
     <a class='medium green awesome' href='test.html'>Test</a> 
    </div> 
    <div id="Page2" class="Page"> 
     Content 1 
     <a class='medium green awesome' href='test.html'>Test</a> 
    </div> 
</div> 
<div class="Tabs"> 
    <ul> 
     <li class="Tab" id="Tab1">Tab1</li> 
     <li class="Tab" id="Tab2">Tab2</li> 
    </ul> 
</div>

CSS：

div .Pages 
{ 
    width: 300px; 
    min-height: 350px; 
    background: #fff; 
    border: solid 1px #333; 
    position: relative; 
    float: left; 
    overflow: hidden; 
    padding: 20px; 
} 

div .Page 
{ 
    width: 100%; 
    z-index: 0; 
} 

div .Tabs 
{ 
    float: left; 
    margin: 10px 0px 0px 0px; 
} 

.Tabs ul 
{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 

.Tabs li 
{ 
    padding: 0px; 
    margin: 0px 0px 10px 0px; 
} 

.Tab 
{ 
    margin: 0px 0px 0px 0px; 
} 

.TabActive 
{ 
    color: red; 
} 


//THESE BUTTONS ARE THE ONES THAT SHOWS UP WRONG: 
//GOT THESE FROM: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba 

.awesome, .awesome:visited { 
background: #f9f9f9 url(/images/alert-overlay.png) repeat-x; 
display: inline-block; 
padding: 5px 10px 6px; 
color: #fff; 
text-decoration: none; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
text-shadow: 0 -1px 1px rgba(100,100,100,0.1); 
border-bottom: 1px solid rgba(0,0,0,0.1); 
position: relative; 
cursor: pointer; 
} 

.medium.awesome, .medium.awesome:visited  { font-size: 11px; font-weight: bold; line-height: 1; } 
.green.awesome, .green.awesome:visited  {  background: url(images/buttons/greenbuttonbg.png) repeat-x 0 0; }

来源

2010-01-11 Martin

它w应该帮助你知道你的CSS是什么样的。尝试在当前显示的div中添加一个z-index：10。

来源

2010-01-11 11:31:26 pixeline

我加入的CSS和我也有发现，这似乎是真棒，按钮，显示错误的。虽然看不到问题。 – Martin 2010-01-11 12:45:22

尝试显示：无，而不是显示：隐藏

来源

2010-01-11 11:27:38

-1 - 它不会显示：隐藏，它的可见性：隐藏 – 2010-01-17 17:47:16

我会忍不住要做到：

if(!$(this).hasClass('TabActive')) 
{ 
    // Hide/show pages 
    $('.Page').hide(); 
    $('#Page' + this.id.substring(3, 4)).show(); 

    // Show Pages 
    pages.animate({ width: "toggle" }, 200); 

    // Deal with active classes 
    $(".TabActive").removeClass('TabActive'); 
    $(this).addClass('TabActive'); 
} 
else 
{ 
    if($(".Pages").is(":hidden")) 
    pages.animate({ width: "toggle" }, 200); 
}

你知道所有的页面总是被隐藏的方式。

来源

2010-01-11 11:38:37

谢谢！改变了我的问题中的一些代码，但还没有找到解决方案。 – Martin 2010-01-11 12:55:27

您的页面是否有valid doctype？听起来像你的页面中可能存在一些格式不正确的HTML？

来源

2010-01-18 19:15:59

选中此项。即使使用有效的文档类型，IE也可以非常轻松地进入怪异模式，因此您可能需要验证生成的HTML。未封闭的标签通常是罪魁祸首。 – noah 2010-01-19 20:58:16