jquery在IE中显示问题

Question

我有一种内置 jquery 的“选项卡”解决方案。当用户单击某个选项卡时，我会获取该选项卡的 id，并根据该 id 显示该选项卡的正确内容。它在 Firefox 中完美运行，当单击选项卡时，它会隐藏所有具有“Page”类的 div，然后显示正确的 Page。

在 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; }

Answer 1

这将有助于了解您的 css 是什么样子。尝试将 z-index:10 添加到当前显示的 div 中。