滑动标签效果的实现

2011年06月17日 其他 评论 3 条 阅读 6,920 views 次

这两天在做网站,根据客户要求,需要实现“多个栏目在同一个区域显示,当鼠标移动个某个栏目时,下面的区域就显示相应的内容”这个效果称之为滑动门或是滑动标签。毕竟我不是专科出生,只能现学现用,所以把学习的成果记录在此,方便自己查询或给其他人一点启示。此效果是通过DIV+CSS来实现。好了,先看一下效果。

tab 标签

下面是代码,不做过多说明,如果有什么问题,可以一起交流。

<!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>滑动标签</title>
<style media="screen" type="text/css">

*{font-size:12px;}

html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}

UL{list-style-type:none; margin:0px;}

/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #B4BECC;border-top:1;text-align:left;}
.w320{margin:2px 0;clear:both;width:320px;/*滑动门的宽度*/}

/* TAB效果 */
.tb_ {background-color: #FFFFFF;}
.tb_ ul{height:29px; padding:1px;}
.tb_ li{float:left;height: 29px;line-height:1.9;width: 78px; padding:0 2px; cursor:pointer;}

/* 控制显示与隐藏css类 */
.normaltab   { background-image:url('nbg.gif'); background-repeat: no-repeat;}
.hovertab    { background-image: url('nbg1.gif'); background-repeat: no-repeat;}
.dis{display:block;}
.undis{display:none;}

</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签,就将i<=N;
for(var i=1;i<=3;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w320">
<div id="tb_" class="tb_">
   <ul>
    <li id="tb_1" class="hovertab" onmouseover="HoverLi(1);">
    ASP.NET</li>
    <li id="tb_2" class="normaltab" onmouseover="HoverLi(2);">
    MYSQL</li>
    <li id="tb_3" class="normaltab" onmouseover="HoverLi(3);">
    DELPHI</li>
   </ul>
</div>
 
 
<div class="ctt">
  <div class="dis" id="tbc_01">
    <li>这里是ASP.NET的相关内容</li>
    <li>这里是ASP.NET的相关内容</li>
    <li>这里是ASP.NET的相关内容</li>
    <li>这里是ASP.NET的相关内容</li>
    <li>这里是ASP.NET的相关内容</li>
    <li>这里是ASP.NET的相关内容</li>         
  </div>
  <div class="undis" id="tbc_02">
  <li>这里是MYSQL的相关内容</li>
  <li>这里是MYSQL的相关内容</li>
  <li>这里是MYSQL的相关内容</li>
  <li>这里是MYSQL的相关内容</li>
  <li>这里是MYSQL的相关内容</li>
  <li>这里是MYSQL的相关内容</li>
  </div>
  <div class="undis" id="tbc_03">
  <li>这里是DELPHI的相关内容</li>
  <li>这里是DELPHI的相关内容</li>
  <li>这里是DELPHI的相关内容</li>
  <li>这里是DELPHI的相关内容</li>
  <li>这里是DELPHI的相关内容</li>
  <li>这里是DELPHI的相关内容</li>
  </div>
</div>
</div>
</body>
</html>

图标如下

 

nbg1tabs1tabs2tabs3nbg

3 条留言  访客:2 条  博主:1 条

  1. 不错哦

  2. 呵呵,放点轮滑油,肯定滑得更快!

给我留言

Copyright © 羽飞博客 保留所有权利.   Ality主题 皖ICP备14013844号-1

用户登录