看到不少人的 Blog 中已经应用到了现实或者隐藏侧栏的功能，例如 http://www.momocn.com/blog/ ，自己也尝试来实现这样一个功能。 首先考虑这个功能的实现思路。 假设整个页面分为左右两栏，通过菜单上的一个按钮来控制左侧栏的显示和隐藏，右侧主栏宽度也要根据左侧栏的显隐来自动调节。实现此功能，无非就是通过脚本来设置左侧栏宽度，同时根据页面宽度来计算右边的主侧栏动态宽度。 要了解页面的宽度，可以通过 document.body.clientWidth 来获得。而各栏的宽度通过 object.style.width 可以获得。 同时，我们要考虑另外一个情况，就是当用户更改窗口大小的时候，页面的布局也应该随之改变。 演示请看：http://www.purewhite.cn/demo/showHideBar.html 代码很简单，全部如下： 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>侧栏显隐控制</title> <style type="text/css"> <!-- body { padding: 0; /*margin: 0;*/ } body, table, td, th, input, textarea, p, select, div, span { font-size: 12px; } #ctrl { line-height: 22px; text-align: center; width: 80px; height: 22px; /*margin-left: 12px;*/ border: 1px solid #DCDCDC; cursor: default; } #box { display: inline; } #sidebar { background: #A3B2CC; width: 200px; float: left; } #contenter { background: #D0D0D0; width: 0; float: left; } --> </style> <script language="javascript" type="text/javascript"> <!-- var s; var objCtrl; var objSideBar; var objContenter; function showHideBar() { if (parseInt(objSideBar.style.width) != 0) { objSideBar.style.width = "0px"; objSideBar.innerHTML = ""; objCtrl.innerHTML = "显示侧栏"; } else { objSideBar.style.width = "200px"; objSideBar.innerHTML = s; objCtrl.innerHTML = "隐藏侧栏"; } objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px"; } function initSideBar() { objSideBar = document.getElementById("sidebar"); objCtrl = document.getElementById("ctrl"); objContenter = document.getElementById("contenter"); s = objSideBar.innerHTML; objSideBar.style.width = "200px"; objSideBar.innerHTML = s; objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px"; } function resizeWindow() { objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px"; } --> </script> </head> <body onload="initSideBar();" onresize="resizeWindow();"> <p id="ctrl" onclick="showHideBar();">隐藏侧栏</p> <div id="box"> <div id="sidebar"> <ul> <li><a href="http://www.purewhite.cn/archives/2005/09/post_4.html">站长资讯 新版论坛</a></li> <li><a href="http://www.purewhite.cn/archives/2005/09/xmlhttprequest.html">XMLHttpRequest 和 AJAX</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/opera.html">Opera 十周年庆，注册码免费提供</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/post_3.html">颜色选择器</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/google_talk_v10.html">Google Talk V1.0.0.64 汉化版</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/css_autoscroll.html">CSS 定制自动滚动(autoscroll)图片</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/_v4.html">苹果树下 V4</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/w3_schools.html">W3 Schools</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/ado.html">ADO 中的数据库连接</a></li> <li><a href="http://www.purewhite.cn/archives/2005/08/_w3orgcn.html">关于 w3.org.cn</a></li> </ul> </div> <div id="contenter"> <p>颜色选择器(Color Picker)，在 Web 开发中应用应该是比较广泛的。在网上看过的颜色选择器也有很多种，而且很多功能相当强大。我这里制作这个最简单的颜色选择器，只是最为自己制作尝试的一部分——这个大概是因为我习惯于使用自己的东西的癖好有关。</p> <p>实现过程很简单，因为总共是 216 种颜色，即 6 * 6 * 6，采用三层循环就可以实现了。演示中的代码，是本地的 ASP 程序生成的，其实也完全可以采用 JavaScript 来实现，可以减少代码量。我没有采用表格，而是利用“无序列表”结合 <acronym title="Cascading Style Sheets">CSS</acronym> 来实现的。加上一些控制的 JavaScript 。</p> <p>示例：<a href="http://www.purewhite.cn/demo/showcolor.html" title="查看示例">颜色选择器</a></p> <p>顺便提一个想法：当上传图片的时候，是否可以分析图片包含的色彩信息，计算出其中出现频率最高的一种色彩，从而作为该图片的主体色，以实现图片按照主体色分类？！</p> </div> </div> </body> </html>
这两天本来想更新一下这个内容。 这种思路比较繁琐，而且也不太合理。 简单的方法就是定义两种样式，一种是有侧栏情况下的，另一种是隐藏侧栏情况下的。点侧栏隐藏，就切换样式到隐藏侧栏的情况下。 不知道这样说大家明白不？迟点写个例子上来。
演示：http://www.purewhite.cn/demo/20060421001/ 这个是通过 JavaScript 结合 CSS 实现的，简单明了。 IE 6 和 FF 1.5 下面测试均有效。 HTML: <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>侧栏显隐</title> <style type="text/css" media="screen"> body { font-size: 12px; text-align: center; } #control { text-align: right; width: 720px; margin: 0 auto; } #container { width: 720px; margin: 0 auto; } .apartcontent { color: #000; background: #f0f0f0; width: 520px; float: left; } .fullcontent { color: #000; background: #f0f0f0; width: 720px; float: left; } #sidebar { color: #000; background: #d0d0d0; display: block; width: 200px; float: right; } </style> <script language="javascript" type="text/javascript"> function showHideSidebar() { var oCtrl = document.getElementById("ctrl"); var oSidebar = document.getElementById("sidebar"); var oContent = document.getElementById("content"); oCtrl.innerHTML = (oCtrl.innerHTML == "隐藏侧栏") ? "显示侧栏" : "隐藏侧栏"; oSidebar.style.display = (oSidebar.style.display == "none") ? "block" : "none"; oContent.className = (oContent.className == "apartcontent") ? "fullcontent" : "apartcontent"; } </script> </head> <body> <div id="control"><a id="ctrl" href="javascript: void(0);" onclick="showHideSidebar();">隐藏侧栏</a></div> <div id="container"> <div id="content" class="apartcontent">主内容区域</div> <div id="sidebar">侧栏区域</div> </div> </body> </html>