网页制作：滑动门技术

                                                　　　最近网上流行一种"滑动门"的技术，其实就是JS+CSS+Div层效果，复制如下代码保存为html文件：
               
               
               
               
               
               
                html>
head>
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
script>
function dj(i)
{
  for(j=1;j5;j++)
    {
  if(i==j){
   document.getElementById("a"+j).className="li2";
   document.getElementById("b"+j).style.display="";
          }
   else
    {
   document.getElementById("a"+j).className="li1";
   document.getElementById("b"+j).style.display="none";
      }
     }  
}
/script>
title>滑动门技术 /title>
style>
/* CSS Document */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 滑动门 */
#c{width:243px; margin:0 auto; font-size:12px; border:#94D5F3 1px solid;}
#c ul{ list-style:none; margin:0; padding:0;}
#c .li1 { width:60px; display:block;border-bottom: #94D5F3 1px solid;border-right: #94D5F3 1px solid;  background-color: #DBF2FD; float:left;}
#c .li2{ width:60px; display:block; border-bottom:none; background-color: #fff; border-right: #94D5F3 1px solid;float:left;}
.txt{ width:243px; padding:0;}
/style>
/head>
body>
    br>
div id="c">
ul>
li id=a1 class="li1">a onclick="dj(1)" href="#">窗口一/a>/li>
li id=a2 class="li2">a onclick="dj(2)" href="#">窗口二/a>/li>
li id=a3 class="li1">a onclick="dj(3)" href="#">窗口一/a>/li>
li id=a4 class="li1" style="border-right:none">a onclick="dj(4)" href="#">窗口二/a>/li>
/ul>
div id=b1 class="txt" >内容一/div>
div id=b2 class="txt" style="display:none">内容二/div>
div id=b3 class="txt" style="display:none">内容三/div>
div id=b4 class="txt" style="display:none">内容四/div>
/div>
/body>
/html>
效果如下图：