界面完成后,在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的下划线会被遮罩层盖住。这是一个比较笨的方法,如果谁有比较好的思路,请提供以下!谢谢
分享到:
相关推荐
ie tabie tabie tabie tabie tabie tabie tabie tab
你只需要在Chrome浏览器中以标签的形式创建一个IE窗口,从而就可以支持用户以IE的标准来访问该网页。 用户以后访问某些只支持 IE 登录的网站时可以在Chrome中使用 IE Tab 打开,Chrome用户便可充分享受Chrome带来的...
此为离线安装包,方便不便于访问Chrome应用...*Chrome右键菜单支持(用IE Tab Multi打开链接) *支持自动匹配网址 *支持自动登录 *支持解除右键限制 *可添加网址书签到Chrome中 *截取这张页面 *导出程序信息,导入程序信息
jquery 图片导航 图片tab image tab 菜单 jquery image tab 不要用ie查看jquery 图片导航 图片tab image tab 菜单 jquery image tab 不要用ie查看
Chrome插件IETAB
ie6 ie7 ie8找出指定tab页并显示到前端
IETAB辅助IE helper
在Firefox下直接调用IE浏览器(IETab这个插件).zip
将下载的crx文件拖至谷歌浏览器的扩展程序中,IE-Tab-Multi是将谷歌浏览器的内核切换到IE内核,使其在谷歌中利用IETAB来打开只在IE兼容的网站
原来有个插件IE tab,但不支持Firefox 3.6,而coral ie tab是个很好的升级产品。 安装方法:用Firefox打开。或者在Firefox的工具菜单下找到“附加组件”,将xpi文件拖到“附件组件”窗口。 按网站的说明这个版本好像...
JQ实现tab菜单,页面无刷新,鼠标指向
tab菜单,网上常见的tab菜单。类似于网上常见的tab菜单
chrome ie tab multi 两个版本。一个是1.0.0.1,在chrome68上用不了,安装后会被删除;一个是1.0.2.4只能在win8下使用。
之前我们分享过很多HTML5/CSS3菜单,应该说大部分都还比较实用华丽,今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单。这款Tab菜单是利用HTML5和SVG实现的,Tab菜单的外观非常漂亮,而且Tab切换也很方便...
tab菜单单击时切换标签的例子,通用轻量级tab导航菜单
一个用js制作tab菜单
自由切换IE/Chrome 内核
谷歌 IE Tab v10.5.10.crx 插件,亲测可用。!!!!!!!!!
此为离线安装包,方便不便于访问Chrome应用店的用户安装。 原作者主页:http://iblogbox.com/chrome/ietab 可在Chrome内使用多标签页式的IE,... 这个扩展支持Chrome 6 以及更高的版本 *在Chrome浏览器中用多标签的IE。
ie tab for chrome