Question

我有一种在jquery中构建的“tab”解决方案。当用户单击选项卡时，我会获得该选项卡的ID，并根据ID显示该选项卡的正确内容。它在Firefox中运行得很完美，当单击选项卡时，它会隐藏所有带有“Page”类的div，然后显示正确的页面。

在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中。

Answer 2

我很想做：

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

这样你知道所有页面都被隐藏了。

Answer 3

您的网页是否有valid doctype？听起来你的页面中某处可能存在格式错误的HTML？

Answer 4

这可能与IE z-index错误有关。我知道IE6和7都存在关于z-index显示内容错误的问题。快速谷歌搜索可能会对此有所了解，因为有一些关于jQuery的工作

Answer 5

尝试display：none而不是display：hidden

Answer 6

我无法重现您遇到的问题，但我确实注意到您的JavaScript存在问题。设置z-index时，示例代码如下所示：

$(".Page").css({ 'z-index:': '0' });

在'z-index'之后你不需要冒号 - 它应该是这样的：

$(".Page").css({ 'z-index': '0' });

我不知道这是否能解决您的问题。

Answer 7

可能是一个IE8错误，它不是IE中第一次跳到它不应该的前面。

另外请抓住这个问题：Z-index broken in IE8?

IE中的Jquery显示问题

7 个答案: