.
.
.
.
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>收缩左边栏效果</TITLE>
<STYLE type="text/css">
td{font-size:12px;line-height:22px;}
.red{color: #FF0000}
</STYLE>
<SCRIPT language="JavaScript">
function show(){
if(document.getElementById("left").style.display=='none'){ //判断目前左边栏的状态（显示、隐藏）
document.getElementById("left").style.display='block'; //显示左边栏
}
else{document.getElementById("left").style.display='none'; //隐藏左边栏
}
}
</SCRIPT>
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ONCONTEXTMENU="return false;">
<TABLE width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD id="left" width="200">点点右边的收缩按钮，看看我是不是进去了！</TD>
<TD width="8" style="border-right:1 #cccccc solid;"><A href="javascript:show();"><IMG src="image/fclose.jpg" align="absmiddle" border="0"></A></TD>
<TD valign="top"><DIV style="padding-left:10px;padding-right:10px;"><BR>
一、点击左边的缩进图片，左边栏收缩
<BR><BR>
二、实现的思路
<DIV style="padding-left:20px;">1、图片作为按扭，点击图片触发层的显示和收缩，图片代码如下：<BR>
<SPAN class="red">< A href="javascript:show();"> < IMG src="image/fclose.gif" align="absmiddle" border="0"> < /A></SPAN></DIV>
<BR>三、主要源代码
<DIV style="padding-left:20px;background-color:#efefef;">
<P><HTML><BR>
<HEAD><BR>
<META http-equiv="Content-Type" content="text/html; charset=gb2312"><BR>
<TITLE>收缩左边栏效果</TITLE><BR>
<STYLE type="text/css"><BR>
td{font-size:12px;line-height:22px;}<BR>
.red{color: #FF0000}<BR>
</STYLE><BR>
<SCRIPT language="JavaScript"><BR>
function show(){<BR>
<SPAN class="red">if(document.getElementById("left").style.display=='none')</SPAN>{ //判断目前左边栏的状态（显示、隐藏）<BR>
<SPAN class="red">document.getElementById("left").style.display='block'; </SPAN>//显示左边栏<BR>
}<BR>
<SPAN class="red">else{document.getElementById("left").style.display='none';</SPAN> //隐藏左边栏<BR>
}<BR>
}<BR>
</SCRIPT><BR>
</HEAD></P>
<P><BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ONCONTEXTMENU="return false;"><BR>
<TABLE width="98%" border="0" cellspacing="0" cellpadding="0" align="center"><BR>
<TR><BR>
<TD id="left" width="200">点点右边的收缩按钮，看看我是不是进去了！</TD><BR>
<TD width="8" style="border-right:1 #cccccc solid;"><SPAN class="red"><A href="javascript:show();"><IMG src="image/fclose.jpg" align="absmiddle" border="0"></A></SPAN></TD><BR>
<TD valign="top">右侧</TD><BR>
</TR><BR>
</TABLE></P>
<P></BODY><BR>
</HTML></P>
</DIV>
<BR>四、制作一个页面，实现收缩左边栏的效果(和本例效果一样)<BR>
<BR>
</DIV>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>