一款代码很少的Css+JS滑动门

tagalin

浏览: 129678 次
性别:
来自: 杭州

最近访客更多访客>>

cnm741

生活的聆听者

chenqi20002008

lijun0349

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css+js

Css+JS滑动门

<!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;
 float: right;
 width: 680px;
} 
.w936{
 width:288px;
 border:1px solid skyblue;
 margin-top: 2px;
 margin-right: 0;
 margin-bottom: 2px;
 margin-left: 0;
 float: left;
}


/* TAB 切换效果 */ 
.tb_{background-color: #E6F2FF; background-image: url('http://www.dc18.com/images/barbg_tab.gif'); background-repeat: repeat-x;} 
.tb_ ul{height:24px;} 
.tb_ li{float:left;height: 24px;padding-top: 6px;width: 288px;cursor:pointer;} 
.normaltab    { background-repeat: no-repeat; color:#1F3A87 ;} 
.hovertab     { background-repeat: no-repeat; color:#1F3A87; font-weight:bold } 
.dis{display:block;} 
.undis{display:none;}
#Layer1 {
 position:absolute;
 left:232px;
 top:82px;
 width:145px;
 height:85px;
 z-index:1;
}
#aaaaaa {
 height: 100px;
 width: 100px;
 position: absolute;
 left: 393px;
 top: 16px;
}

--> 
</style> 
<script type="text/javascript" language="javascript"> 
<!-- 
function g(o){return document.getElementById(o);} 
function HoverLi(n){ 
//如果有N个标签,就将i<=N; 
for(var i=1;i<=6;i++){
 g('tb_'+i).className='normaltab';
 g('tbc_0'+i).className='undis';
 }
 g('tbc_0'+n).className='dis';
 g('tb_'+n).className='hovertab'; 
} 
//--> 
</script> 
</head>

<body>

<div id="aaaaaa"><img src="skin-bg.gif" width="213" height="105" /></div>
<div class="w936"> 
     <div id="tb_" class="tb_"> 
             <ul> 
                 <li id="tb_1" class="hovertab" onclick ="xgz:HoverLi(1);">网上房展会</li> 
                 <li id="tb_2" class="normaltab" onclick="xgz:HoverLi(2);">本月开盘</li> 
                 <li id="tb_3" class="normaltab" onclick="xgz:HoverLi(3);">知名开发商</li> 
                 <li id="tb_4" class="normaltab" onclick="xgz:HoverLi(4);">栏目导航</li> 
                 <li id="tb_5" class="normaltab" onclick="xgz:HoverLi(5);">哈哈哈哈</li> 
                 <li id="tb_6" class="normaltab" onclick="xgz:HoverLi(6);">Q小鸽子</li> 
             </ul> 
     </div>

</div> <div class="ctt"> 
         <div class="dis" id="tbc_01">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</div> 
         <div class="undis" id="tbc_02">内容2</div> 
         <div class="undis" id="tbc_03">内容3</div> 
         <div class="undis" id="tbc_04">内容4</div> 
         <div class="undis" id="tbc_05">内容5</div> 
         <div class="undis" id="tbc_06">内容6 [Q小鸽子]</div> 
     </div> 
</body> 
</html>

原文链接：http://hi.baidu.com/fuyangxw/blog/item/ca26523e293c802b70cf6c18.html

分享到：