符合标准的滑动门（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;"> 
<!-- 选项卡0开始 --> 
<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> 
<!-- 选项卡0结束 --> 
</body> 
</html>
上一个：兼容好的CSS横向导航条
下一个：鼠标滑过字体加粗、背景变色的CSS导航栏
更多图片编程知识: