超简单滑动门效果
<script language="javascript" type="text/javascript"> function ObjMouseOver(obj,n) { obj.style.backgroundColor='gray'; obj.style.cursor='nomal'; DisplayContent(n); } function ObjMouseOut(obj,n) { obj.style.backgroundColor='#ffffff'; obj.style.cursor='nomal'; } function DisplayContent(m) { var dv1 = document.getElementById("con1"); var dv2 = document.getElementById("con2"); var dv3 = document.getElementById("con3"); var dv4 = document.getElementById("con4"); var dv5 = document.getElementById("con5"); var dv6 = document.getElementById("con6"); dv1.style.display='none'; dv2.style.display='none'; dv3.style.display='none'; dv4.style.display='none'; dv5.style.display='none'; dv6.style.display='none'; switch(m) { case 1: dv1.style.display='block'; break; case 2: dv2.style.display='block'; break; case 3: dv3.style.display='block'; break; case 4: dv4.style.display='block'; break; case 5: dv5.style.display='block'; break; case 6: dv6.style.display='block'; break; } } </script> <div><table border="0" cellpadding="0" cellspacing="1" style="background-color:#333333"> <tr> <td style="background-color:#fefefe;text-align:center;padding-left:5px;padding-right:5px;" onmouseover="ObjMouseOver(this,1);" onmouseout="ObjMouseOut(this,1);" >Test1</td> <td style="background-color:#fefefe;text-align:center;padding-left:5px;padding-right:5px;" onmouseover="ObjMouseOver(this,2);" onmouseout="ObjMouseOut(this,2);" >Test2</td> <td style="background-color:#fefefe;text-align:center;padding-left:5px;padding-right:5px;" onmouseover="ObjMouseOver(this,3);" onmouseout="ObjMouseOut(this,3);" >Test3</td> <td style="background-color:#fefefe;text-align:center;padding-left:5px;padding-right:5px;" onmouseover="ObjMouseOver(this,4);" onmouseout="ObjMouseOut(this,4);" >Test4</td> <td style="background-color:#fefefe;text-align:center;padding-left:5px;padding-right:5px;" onmouseover="ObjMouseOver(this,5);" onmouseout="ObjMouseOut(this,5);" >Test5</td> <td style="background-color:#fefefe;text-align:center;padding-left:5px;padding-right:5px;" onmouseover="ObjMouseOver(this,6);" onmouseout="ObjMouseOut(this,6);" >Test6</td> </tr> <tr> <td colspan="6"> <div id="con1" style="height:100px;background-color:#ffffff;display:block">第1层 DIV 1</div> <div id="con2" style="height:100px;background-color:#ffffff;display:none">第2层 DIV 2</div> <div id="con3" style="height:100px;background-color:#ffffff;display:none">第3层 DIV 3</div> <div id="con4" style="height:100px;background-color:#ffffff;display:none">第4层 DIV 4</div> <div id="con5" style="height:100px;background-color:#ffffff;display:none">第5层 DIV 5</div> <div id="con6" style="height:100px;background-color:#ffffff;display:none">第6层 DIV 6</div> </td> </tr> </table>