如何实现像CSDN导行树那样的显示和隐藏呀！

如何实现像CSDN导行树那样的显示和隐藏呀！用框架做的网页如何隐藏和显示呀！！  如何改变分隔条的样式！
请给一个比较全的例子！  谢谢！

解决方案 »

  1.   

    下面的例子：
        把框架分为左中右三个页面。
        中间的页面其实只有一个按钮，用来显示和隐藏左边框架的导航条。
    你可以去http://www.windtank.com/Main.asp?url=download.htm这个网站看下效果。。框架页：<HTML>
    <HEAD>
    <TITLE>内容框架集</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    </HEAD>
    <frameset name="main" border="0" frameSpacing="0" frameBorder="0" cols="110,11,100%">
    <frame name="spscontents" src="" scrolling="no">
    <frame name="handle" src="handle.htm" noResize scrolling="no" marginwidth="10">
    <frame name="hsemsbrow" src="">
    <noframes>
    <pre id="p2">
    ================================================================
    关于完成此内容框架集的说明
    1. 为“contents”框架添加 src="" 页的 URL。
    2. 为“main”框架添加 src="" 页的 URL。
    3. 将 BASE target="main" 元素添加到“contents”页的 
    HEAD，以将“main”设置为默认框架，“contents”页的链接将
    在该框架中显示其他页。
    ================================================================
    </pre>
    <p id="p1">
    此 HTML 框架集显示多个 Web 页。若要查看此框架集，请使用支持 HTML 4.0 及更高版本的 Web 浏览器。
    </p>
    </noframes>
    </frameset>
    </HTML>中间的分隔条：handle.htm页面
    <HTML>
    <HEAD>
    <title>handel</title>
    <meta content="Microsoft Visual Studio .NET 7.0" name="GENERATOR">
    <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    <script language="javascript" id="clientEventHandlersJS">
    <!--function adjust() {
    if(window.parent.main.cols=="0,11,100%"){
    window.IMG1.src="img/in.gif";
    window.parent.main.cols="110,11,100%";
    window.IMG1.alt="隐藏导航栏" ;
    }
    else{
    window.IMG1.src="img/out.gif";
    window.parent.main.cols="0,11,100%";
    window.IMG1.alt="显示导航栏";
    }
    }//-->
    </script>
    </HEAD>
    <body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" MS_POSITIONING="GridLayout">
    <TABLE id="Table1" style="BORDER-RIGHT: #33aa33 1px solid; Z-INDEX: 101; LEFT: 0px; BORDER-LEFT: #33aa33 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #d3f3d6"
    cellSpacing="0" cellPadding="0" width="11" border="0">
    <TR>
    <TD noWrap><A href="javascript:adjust()"><IMG id="IMG1" alt="隐藏导航栏" src="img/in.gif" border="0" name="IMG1" width="8" height="87"></A></TD>
    </TR>
    </TABLE>
    </body>
    </HTML>
      

  2.   

    利用框架的hiden属性就可以使框架隐藏和显示
      

  3.   

    用javascript 改变框架的宽度http://www.yulinsoft.com