一个简单的滑动门 代码

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

转载于:https://www.cnblogs.com/chenjilv/archive/2007/11/27/974143.html