一款流行简洁的CSS滑动门代码_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

这是一款来自许多热门论坛，很多网站都见到过的经典简洁的CSS滑动门效果，过这种，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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS滑动门 DIV+CSS教程 http://www.csschina.net</title> <style media="screen" type="text/css">  </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<=6;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="w936"> <div id="tb_" class="tb_"> <ul> <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);"> ASP.NET</li> <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);"> MYSQL</li> <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);"> DELPHI</li> <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);"> VB.NET</li> <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);"> JAVA</li> <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);"> PHP5</li> </ul> </div> <div class="ctt"> <div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div> <div class="undis" id="tbc_02">这里是MYSQL的相关内容</div> <div class="undis" id="tbc_03">这里是DELPHI的相关内容</div> <div class="undis" id="tbc_04">这里是VB.NET的相关内容</div> <div class="undis" id="tbc_05">这里是JAVA的相关内容</div> <div class="undis" id="tbc_06">这里是PHP5的相关内容</b> </div> </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

本文由CSS中国整理

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

一款流行简洁的CSS滑动门代码