当前位置:编程学习 > JS >>

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

Html代码 
<!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>

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,