【原创】改造ibm首页tab效果

jackyrar · 发表于 2017-5-25 11:09:30

　　之前看过好多网站都在模仿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" >首页</a>
    <a href="javascript:;" id="tab_2" >了解支持</a>
    <a href="javascript:;" id="tab_3" >了解支持</a>
    <a href="javascript:;" id="tab_4" >了解支持</a>
    <a href="javascript:;" id="tab_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>

　　图片放在附件里了

账号		自动登录	找回密码
密码			立即注册

wirelessnetview好用的无线分析工具

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

RH199 RHCSA Rapid Track

Red Hat RHCE 8 (EX294) Cert Guide

[经验分享] 【原创】改造ibm首页tab效果

浏览过的版块

扫码加入运维网微信交流群