DIV滑动门代码

<style type="text/css"> body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 240px; margin: 0 auto; border-bottom:1px #C7C7CD solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 60px; cursor: pointer; padding-top: 6px; padding-right: 0px; padding-left: 0px; padding-bottom: 7px; list-style-type: none; } .nTab .TabTitle .active{ background:url(images/finance_nc_080124_ws_001.gif) left -25px no-repeat;border-left:1px #C7C7CD solid;border-top:1px #C7C7CD solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{ background:url(images/finance_nc_080124_ws_001.gif);border-top:1px #C7C7CD solid;border-bottom:1px #C7C7CD solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #C7C7CD solid;border-left:1px #C7C7CD 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> <!-- 选项卡开始 --> <div class="nTab"> <!-- 标题开始 --> <div class="TabTitle"> <ul id="myTab0"> <li class="active" onClick="nTabs(this,0);">预拔电杆</li> <li class="normal" onClick="nTabs(this,1);">预等电杆</li> <li class="normal" onClick="nTabs(this,2);">普拔电杆</li> <li class="normal" onClick="nTabs(this,3);">部预电杆</li> </ul> </div> <!-- 内容开始 --> <div class="TabContent"> <div id="myTab0_Content0"> 欢迎访问：<a href="http://www.alixixi.com" target="_blank">阿里西西WEB开发 </a></div> <div id="myTab0_Content1" class="none"><a href="http://www.alixixi.com">计源论坛 计源论坛</a></div> <div id="myTab0_Content2" class="none"><a href="http://www.alixixi.com">计源论坛22</a></div> <div id="myTab0_Content3" class="none"><a href="http://www.alixixi.com">计源论坛33</a></div> </div> </div> <!-- 选项卡结束 -->