对在IE6下TAB菜单问题的补充！(一个比较笨的方法)

最新推荐文章于 2020-02-18 20:27:54 发布

kaindy7633

最新推荐文章于 2020-02-18 20:27:54 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript/jQuery XHTML/CSS 文章标签： IE6 TAB

本文链接：https://blog.youkuaiyun.com/kaindy7633/article/details/84268177

JavaScript/jQuery 同时被 2 个专栏收录

9 篇文章

订阅专栏

XHTML/CSS

3 篇文章

订阅专栏

本文介绍了一种在IE6浏览器中实现TAB菜单的兼容性方案，通过添加遮罩层来解决浮动造成的显示问题，并使用JavaScript进行交互控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面完成后，在IE6下，TAB菜单的问题就出来了，上篇文章所提到的将content区块浮动，会造成一些不可预知的问题，今天改动了一下。

一、在HTML中为每个标题LI增加一个DIV遮罩层，代码如下：

CSS代码如下：

#page_body_left .sj_class_show_1{
    text-align:left;
    margin-bottom:10px;
    text-align:center;
    position:relative;
}
#page_body_left .sj_class_show_1 .zzc_hide{
    width:58px;
    height:1px;
    border:none;
    background-color:#ffffff;
    position:absolute;
    top:25px;
    left:0px;
    z-index:1;
    display:none;
}
#page_body_left .sj_class_show_1 .zzc_show{
    width:58px;
    height:1px;
    border:none;
    background-color:#ffffff;
    position:absolute;
    top:25px;
    left:0px;
    z-index:1;
    display:block;
}
#page_body_left .sj_class_show_1 ul.tab_title_1{
    height:30px;
    line-height:30px;
    font-size:14px;
}
#page_body_left .sj_class_show_1 ul.tab_title_1 li{
    float:left;
    padding:0 15px;
    border:1px solid #ddd;
    border-bottom:none;
    position:relative;
    cursor:pointer;
    margin-right:5px;

}

#page_body_left .sj_class_show_1 ul li.one{
    background:#fff;
}

#page_body_left .sj_class_show_1 .content {
    padding:5px;
    font-size:12px;
    width:690px;
    border:1px solid #ddd;
    height:250px;
}
#page_body_left .sj_class_show_1 .content .show_ct_1 ul{
    margin:3px;
}
#page_body_left .sj_class_show_1 .content .show_ct_1 ul li{
    float:left;
    width:80px;
    height:16px;
    padding:10px;
    border:1px solid #ddd;
    margin:5px
}

在JS中，写如下代码：

$(document).ready(function(){
    $('.show_ct_1:gt(0)').hide();
    var hdw = $('.tab_title_1 li');
    $('.zzc_hide:first').css('display','block');

    hdw.click(function(){
        $(this).addClass('one').siblings().removeClass();
        var hdw_index = hdw    .index(this);
        $('.show_ct_1').eq(hdw    .index(this)).show()
            .siblings().hide();
        $(this).children().addClass('zzc_show');
        $(this).siblings().children().removeClass();
    });
});

这样在IE6下就可以完整的实现TAB菜单，当点击菜单时，菜单LI的下划线会被遮罩层盖住。这是一个比较笨的方法，如果谁有比较好的思路，请提供以下！谢谢