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 

  • 相关阅读:
    asp.net 通过js调用webService注意
    身份证号码验证 类
    char值码对应大全
    C# 让textbox 只能输入数字的方法
    table嵌套循环数据
    拆分字符串
    angular的路由配置
    js对象数组(JSON) 根据某个共同字段 分组
    当前时间的后七天
    ajax提交时“加载中”提示的处理方法
  • 原文地址:https://www.cnblogs.com/wang7/p/2769426.html
Copyright © 2011-2022 走看看