显示隐藏左侧菜单

　　左侧有个菜单，右侧有个iFrame,然后可以隐藏与显示左侧的菜单。

1,下面是js代码：

<script type="text/javascript"  >

function HideShow(){
var alt=document.getElementById('switchPoint').alt;
var src=document.getElementById('switchPoint').src;
    if(alt=='隐藏')
    {
        document.getElementById('switchPoint').setAttribute('alt','显示');//setAttribute            
        document.getElementById('switchPoint').setAttribute('src','show.jpg'); 
        document.getElementById('leftFrame').style.display='none';//设置样式        
        //document.all("leftFrame").style.display='none';//如果是Frame用这个        
    }//if 
    else 
    {
        document.getElementById('switchPoint').alt='隐藏';//直接给属性赋值
        document.getElementById('switchPoint').src='hide.jpg';
        document.getElementById('leftFrame').style.display='';        
    };//else
};//var HideShow

</script>

 

2,下面是html代码:

<body>


<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%">
                <tr>
                    <td bgcolor="#ff0000" width="8px">
                        &nbsp;</td>
                    <td width="170px" valign="top" id="leftFrame">   
                        <uc2:left ID="left1" runat="server" />
                    </td>
                    <td bgcolor="#00ff00" width="10px">
                        <img src="hide.jpg" alt="隐藏" id="switchPoint" onclick="HideShow()" style="cursor:hand"/>
                    </td>
                    <td align="left" valign="top" height="620px">
                        <iframe id="rightFrame" name="main" frameborder="0" scrolling="yes"  src="main.aspx" height="100%" width="100%" ></iframe>
                        &nbsp;</td>
                    <td bgcolor="#0000ff" width="8px">
                        &nbsp;</td>
                </tr>
</table>



</body>

 hide.jpg     

 show.jpg 

posted @ 2012-11-14 10:17  金河  阅读(3940)  评论(0)  编辑  收藏  举报