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

最新推荐文章于 2017-09-10 11:23:00 发布

dujunzhi

最新推荐文章于 2017-09-10 11:23:00 发布

阅读量76

点赞数

分类专栏： HTML5 && CSS3 文章标签： IBM JavaScript CSS QQ XHTML ViewUI

本文链接：https://blog.csdn.net/dujunzhi/article/details/83674985

版权

HTML5 && CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

之前看过好多网站都在模仿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>

图片放在附件里了

dujunzhi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【原创】改造ibm首页tab效果

之前看过好多网站都在模仿ibm首页的tab菜单，看了下ibm的tab菜单，里面的实现有点复杂，我试着用纯css+sprite做了一个，效果是一样的，用到的图片大小8.85k，ibm的所有加起来7k多。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh...
复制链接

扫一扫

专栏目录