日期:2014-05-16  浏览次数:20418 次

用javascript实现显示隐藏左侧菜单
javascript代码如下:
<script language="javascript" type="text/javascript">
    function HideShow()
    {
        var alt = document.getElementById('switchPoint').alt;
        var src = document.getElementById('switchPoint').src;
        if (alt == "隐藏") 
        {
            document.getElementById('switchPoint').alt = "显示";
            document.getElementById('switchPoint').src = src.substring(0, src.length - 8) + "show.jpg";
            document.all("leftFrame").style.display = "none";
        } 
        else 
        {
            document.getElementById('switchPoint').alt = "隐藏";
            document.getElementById('switchPoint').src = src.substring(0, src.length - 8) + "hide.jpg";
            document.all("leftFrame").style.display = "";
        }
    }
</script>




页面代码如下:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%">
                <tr>
                    <td bgcolor="#0A5C8E" width="8px">
                        &nbsp;</td>
                    <td width="170px" valign="top" id="leftFrame">   
                        <uc2:left ID="left1" runat="server" />
                    </td>
                    <td bgcolor="#0A5C8E" width="10px">
                        <img src="images/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="#0A5C8E" width="8px">
                        &nbsp;</td>
                </tr>
</table>