zoukankan      html  css  js  c++  java
  • 显示隐藏左侧菜单

      左侧有个菜单,右侧有个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 

  • 相关阅读:
    Photoshop
    你会为了钱出售自己的个人资料吗?
    [ElasticSearch] 空间搜索 (一)
    hdu1584 A strange lift (电梯最短路径问题)
    Android API Guides---OpenGL ES
    Qt 推断一个IP地址是否有效
    bzoj1670【Usaco2006 Oct】Building the Moat 护城河的挖掘
    集成学习1-Boosting
    微信开发模式之自己定义菜单实现
    人件札记:开放式的办公室环境
  • 原文地址:https://www.cnblogs.com/wang7/p/2769426.html
Copyright © 2011-2022 走看看