后台左右两栏，中间一竖条。点击竖条，可关闭和展开左栏。请问是如何实现的。

后台左右两栏，中间一竖条。点击竖条，可关闭和展开左栏。请问是如何实现的?请给一段简单的代码。

解决方案 »

  1.   

    三个div 中间那个div加个事件 点击隐藏左边的div。
      

  2.   

    框架最简单。其次表格，其次div+css.
      

  3.   

    下面这个代码是框架的main.html<!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>main</title>
    </head>
    <frameset cols=",20,70%" noresize id = "father">
    <frame src = ""></frame>
    <frame src = "switch.html"></frame>
    <frame src = ""></frame>
    </frameset>
    </html>
    switch.html
    <html>
    <head>
        <title>switch</title>
    </head>
    <body style="margin:0px;">
    <a id="coco" onclick="collapse()">＜</a><script>
    function collapse(){    var coco = document.getElementById("coco");    if (coco.innerHTML == "＜" ){
            coco.innerHTML = "＞"; // ＜＞都是全角中文
            window.parent.document.getElementById("father").cols = "0,20,*";
        }
        else{
            coco.innerHTML = "＜";
            window.parent.document.getElementById("father").cols = "*,20,70%";
        }
    }
    </script>
    </body>
    </html>
      

  4.   

    http://www.wwtbless.com/view.asp?id=37
    这个是用table做的。不是很理想，不过原理差不多就是这样。