一个简单的滑动门 代码

    <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>