说明：关于滑动门的相关代码很多，今天给大家推荐的是一个非常简单的实现方式，希望对大家的学习能有所帮助。

<!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>
 .li1 { display:block;border-bottom: #94D5F3 1px solid;border-right: #94D5F3 1px solid;  background-color: #DBF2FD; text-decoration:none; }
 .li2{ display:block; border-bottom:none; background-color: #ffffff; border-right: #94D5F3 1px solid;text-decoration:none; }
</style>
</head>

<body>
<table width="400" border="0" cellpadding="0" cellspacing="0" bordercolor="#003399">
  <tr>
    <td width="100" height="30"><div align="center" id="a1" class="li2"><a href="#" onmousemove="dj(1)">AAAA</a></div></td>
    <td width="100"><div align="center" id="a2" class="li1"><a href="#" onmousemove="dj(2)">BBBB</a></div></td>
    <td width="100"><div align="center" id="a3" class="li1"><a href="#" onmousemove="dj(3)">CCCC</a></div></td>
    <td width="100"><div align="center" id="a4" class="li1"><a href="#" onmousemove="dj(4)">DDDD</a></div></td>
  </tr>
  <tr>
    <td height="150" colspan="4">
  <div align="center" id="b1">A栏目下的内容</div>
  <div align="center" id="b2" style="display:none">B栏目下的内容</div>
  <div align="center" id="b3" style="display:none">C栏目下的内容</div>
  <div align="center" id="b4" style="display:none">D栏目下的内容</div>
  </td>
  </tr>
</table>
</body>
<script>
function dj(i)
{
  for(j=1;j<5;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>
</html>