界面完成后,在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的下划线会被遮罩层盖住。这是一个比较笨的方法,如果谁有比较好的思路,请提供以下!谢谢