符合标准的滑动门（JS+CSS）

2024-09-05 12:20:00

字体：大中小

来源：转载

供稿：网友

看上去很简洁的一款符合标准的滑动门（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=gb2312" /> <title>滑动门</title> <style type="text/css"> body{ font-family: arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 960px; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 22px; overflow: hidden; } .nTab .TabTitle ul{ border:0; margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 70px; cursor: pointer; padding-top: 4px; padding-right: 0px; padding-left: 0px; padding-bottom: 2px; list-style-type: none; } .nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;}.nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; } .none {display:none;} </style> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (i == Num) {    thisObj.className = "active";       document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{    tabList[i].className = "normal";    document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> </head> <body> <div align="center" style="padding-left:25px;">  <div class="nTab">          <div class="TabTitle">       <ul id="myTab0">         <li class="active" onmouseover="nTabs(this,0);">全部</li>         <li class="normal" onmouseover="nTabs(this,1);">日志</li>         <li class="normal" onmouseover="nTabs(this,2);">作品</li>         <li class="normal" onmouseover="nTabs(this,3);">相册</li>         <li class="normal" onmouseover="nTabs(this,4);">心情</li>         <li class="normal" onmouseover="nTabs(this,5);">社区</li>       </ul>     </div>          <div class="TabContent">       <div id="myTab0_Content0"> 全部的内容显示在这里 </div>       <div id="myTab0_Content1" class="none">这里是日志哦</div>       <div id="myTab0_Content2" class="none">我的作品展示</div>       <div id="myTab0_Content3" class="none">我的相册，不要误看哦</div>       <div id="myTab0_Content4" class="none">记录心情日志</div>       <div id="myTab0_Content5" class="none">社区</div>     </div> </div>  </body> </html>

上一篇：透明度慢慢变化的竖向JS+css菜单

下一篇：兼容IE/火狐的蓝色CSS多级导航栏