之前看过好多网站都在模仿ibm首页的tab菜单,
看了下ibm的tab菜单,里面的实现有点复杂,我试着用纯css+sprite做了一个,效果是一样的,用到的图片大小8.85k,ibm的所有加起来7k多。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IBM_Tab_sprite</title>
<style type="text/css">
*{margin:0px; padding:0px;}
img{border:0}
a{color:#555555; text-decoration:none;}
a:hover {color:#D31821; text-decoration:none;}
body{ color:#555555; font-family:宋体,Arial,sans-serif; font-size:12px;}
.tab{list-style:none; width:890px; height:23px; margin:0px auto;}
.tab_1{background:url(tab_bg.png) 0px 0px;}
.tab_2{background:url(tab_bg.png) 0px -23px;}
.tab_3{background:url(tab_bg.png) 0px -46px;}
.tab_4{background:url(tab_bg.png) 0px -69px;}
.tab_5{background:url(tab_bg.png) 0px -92px;}
.tab a{ float:left; width:178px; height:23px; color:#fff; line-height:23px; text-align:center; font-weight:bold }
.tab a:hover{color:#fff;}
.con{ width:890px; height:150px; margin:0px auto; border:1px red solid}
</style>
</head>
<body>
<div class="tab tab_1" id="tab">
<a href="javascript:;" id="tab_1" οnmοuseοver="showInfo(1)">首页</a>
<a href="javascript:;" id="tab_2" οnmοuseοver="showInfo(2)">了解支持</a>
<a href="javascript:;" id="tab_3" οnmοuseοver="showInfo(3)">了解支持</a>
<a href="javascript:;" id="tab_4" οnmοuseοver="showInfo(4)">了解支持</a>
<a href="javascript:;" id="tab_5" οnmοuseοver="showInfo(5)">了解支持</a>
</div>
<div class="con" id="con_1"><h1>制作:rockyuse QQ:296456018</h1></div>
<div class="con" id="con_2" style="display:none">2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div>
<div class="con" id="con_3" style="display:none">3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
<div class="con" id="con_4" style="display:none">444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
<div class="con" id="con_5" style="display:none">5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div>
<script type="text/javascript">
var old = 1;
document.getElementById("tab_" + old).style.color = "#000";
function showInfo(n){
document.getElementById("tab").className="tab tab_" + n;
document.getElementById("tab_" + old).style.color = "#fff";
document.getElementById("tab_" + n).style.color = "#000";
old = n;
for(var i=1; i<=5; i++){
document.getElementById("con_" + i).style.display="none";
}
document.getElementById("con_" + n).style.display="";
}
</script>
</body>
</html>
图片放在附件里了