滑动门 js css
<!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=utf-8" /> <title>▒ 恋婷滑动门技术</title> <style media="screen" type="text/css"> <!-- *{font-size:14px; padding:0; margin:0;} html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;} UL{list-style-type:none; margin:0px;} /* 标准盒模型 */ .gpttl{height:18px;} .gpctt{height:auto;padding:6px;clear:both;text-align:left;} .w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/} /* TAB 切换效果 */ .gptb_{ height:32px; background-color:#eee;} .gptb_ ul{height:32px;} .gptb_ li{float:left; height:30px;line-height:30px; width:94px; cursor:pointer;} /* 用于控制显示与隐藏的css类 */ .gpnormaltab {background-repeat:no-repeat; color:#1F3A87 ;} .gphovertab {color:#1F3A87; font-weight:bold; border-bottom:2px solid #669acc; } .dis{display:block;} .undis{display:none;} --> </style> <script type="text/javascript" language="javascript"> function g(o){return document.getElementById(o);} function HoverLi(n){ for(var i=1;i<=3;i++){g('gptb_'+i).className='normaltab';g('gptbc_0'+i).className='undis';}g('gptbc_0'+n).className='dis';g('gptb_'+n).className='gphovertab';} </script> </head> <body> <div class="w936"> <div id="gptb_" class="gptb_"> <ul> <li id="gptb_1" class="gphovertab" onmouseover="x:HoverLi(1);"> 公棚资讯</li> <li id="gptb_2" class="gpnormaltab" onmouseover="i:HoverLi(2);"> 协会资讯</li> <li id="gptb_3" class="gpnormaltab" onmouseover="a:HoverLi(3);"> 俱乐部资讯</li> </ul> </div> <div class="gpctt"> <div class="dis" id="gptbc_01">流行音乐 的内容</div> <div class="undis" id="gptbc_02">美女写真 的内容</div> <div class="undis" id="gptbc_03">平面设计 的内容</div> </div> </div> </body> </html>