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