在一个框架下,要实现对于左侧栏目的收放功能,不知道为什么实现不了,请大牛帮我看看出错在哪里??<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>隐藏栏</title>
    <link rel="stylesheet" href="../CSS/switch.css" type="text/css"/>
    <script language="javascript" type="text/javascript"> var flag = false;
function shift_status()
{
    var mainFrame = top.document.getElementsByName("main")[0];
if(flag)
{
if(screen.width>1024) {
mainFrame.cols = "170,12,*";
} else if(screen.width>800) {
mainFrame.cols = "170,12,*";
} else {
mainFrame.cols = "160,9,*";
}
document.getElementById("menuSwitch1").src='../Images/switch1_3.gif';
document.getElementById("menuSwitch1").title='隐藏';
}
else
{
//parent.main.cols = "0,9,*";
mainFrame.cols = "0,12,*";
document.getElementById("menuSwitch1").src='../Images/switch1_4.gif';
document.getElementById("menuSwitch1").title='显示';
} flag = !flag;
}
   </script>
</head>
<body onclick="shift_status()" leftmargin="0" topmargin="0" style="margin-right:4px; border-right:solid 1px #a5c6e9" marginheight="0" marginwidth="0">
    <span class="cacher" id="cacheData" name="cacheData"></span>
     <center>
        <table class="switch3" cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td class="switch1" width="2">
                        <img height="1" src="../Images/index/ccc.gif" width="1" alt=""/>
                    </td>
                    <td class="switch2" id="menuSwitch" style="cursor: pointer" valign="center" bgcolor="#e9e9e9">
                        <img id="menuSwitch1" height="11" src="../Images/index/switch1_3.gif" width="7" alt=""/>
                    </td>
                    <td width="2" bgcolor="#e9e9e9">
                    </td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
</html>

解决方案 »

  1.   

    楼主只给个table啊
    ====================================
      网页上左中右样式frame框架,点中间的小条,左面框架隐藏,右边框架全部显示,是网页上常用的结构,例如猫扑之类的。。     其效果主要是由以下代码控制:wtoogle.htm<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    body.wtoogle {
     margin: 0px;
     background-color: #F6F6F6;
    }
    .wtoogle a, .wtoogle a:active, .wtoogle a:visited {
     background-color:#718BD6;
     font-size:10px;
     color: #FFFFFF;
     text-decoration:none;
    }
    </style>
    <script type="text/javascript">
    <!--
    var iniCols, noCols, o_mf, o_ms,s;
    window.onload = function(){
     o_mf = parent.document.getElementById('mainframe');
     o_ms = document.getElementById('menuSwitch');
     noCols = iniCols = o_mf.cols;
     var pos;
     if((pos = noCols.indexOf(",")) != -1)
      noCols = "0" + noCols.substring(pos);
     s = false;
    }
    function changeLeft(){
     s = !s;
     o_mf.cols = s ? noCols : iniCols;
     o_ms.innerHTML = s ? "&#9658;" : "&#9668;";
    }
    //-->
    </script>
    </head>
    <body class="wtoogle">
    <table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr><td>
    <a href="javascript:changeLeft();" class="wtoogle" id="menuSwitch">&#9668;</a>
    </td></tr></table>
    </body>
    </html> --------------------------------------------------------------------------------------------框架整体展示页:home.html<html>
    <head>
    <title>管理页面首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <script type="text/javascript">
    var isMin = false;
    var fo = this;
    function setMin(o) {
     if (fo == o) {
      isMin = true;
     }
    }
    function logout(){
     document.location.href='<%=request.getContextPath()%>/manager/login.jsp';
    }
    function unsetMin(o) {
     fo = o;
     isMin = false;
    }
    window.onunload = logout;
    window.onblur = new Function("top.setMin(this)");
    window.onfocus = new Function("top.unsetMin(this)");
    </script>
    </head>
     <frameset cols="165,11, *" id="mainframe" framespacing="0" border="0" frameborder="0">
      <frame name="contents" src="left.html" marginheight="0" marginwidth="0" noresize>
      <frame name="toogle" src="wtoogle.htm" scrolling="no" marginwidth="0" marginheight="0" noresize>
      <frame name="main" src="right1.html" scrolling="auto" noresize>
     </frameset><noframes></noframes>
    </html>【转】
    隐藏、展示左侧部分框架效果