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

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

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

<div class="sj_class_show_1">
            <ul class="tab_title_1">
                <li class="one">餐饮<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>服装<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>酒店<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>租车<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>超市<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>酒吧<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>网吧<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>发廊<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>装修<div class="zzc_hide"></div><!--遮罩层--></li>
                <li>手机<div class="zzc_hide"></div><!--遮罩层--></li>
            </ul>
            <div class="content">
                <div class="show_ct_1">
                    <ul>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                        <li><a href="#">虚位以待</a></li>
                    </ul>
                </div>
                <div class="show_ct_1">服装</div>
                <div class="show_ct_1">酒店</div>
                <div class="show_ct_1">租车</div>
                <div class="show_ct_1">超市</div>
                <div class="show_ct_1">酒吧</div>
                <div class="show_ct_1">网吧</div>
                <div class="show_ct_1">发廊</div>
                <div class="show_ct_1">装修</div>
                <div class="show_ct_1">手机</div>
            </div>
           
        </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的下划线会被遮罩层盖住。这是一个比较笨的方法，如果谁有比较好的思路，请提供以下！谢谢