将文章归档于 G源共享由. Ken Wong on 2005-10-15

从经典论坛里看到一段小代码，是用来实现显示和隐藏内容的。如下：

<br />
<br />
<SCRIPT language=javascript><br />
<!--<br />
function left_menu(meval)<br />
{<br />
  var left_n=eval(meval);<br />
  if (left_n.style.display=="none")<br />
  { eval(meval+".style.display='';"); }<br />
  else<br />
  { eval(meval+".style.display='none';"); }<br />
}<br />
//document.all.left_sys.style.display='';<br />
//document.all.left_bm.style.display='none'<br />
--><br />
</SCRIPT><br />
<center><br />
<table width="60%" border="0" cellpadding="4" cellspacing="2" bordercolor="#999999"><br />
  <tr><br />
    <td bgcolor="#999999" onclick="javascript:left_menu('left_1');"><strong><font color="#FFFFFF">=== 织梦论坛it365cn.com ===</font></strong></td><br />
  </tr><br />
  <tr><br />
    <td bgcolor="#f7f7f7" id="left_1" style="DISPLAY: none"><table width="60%" border="0" cellspacing="0" cellpadding="4"><br />
      <tr><br />
        <td><B><A href="http://www.it365cn.com/bbs/list.asp?forumid=1">Dreamweaver & 网页编码</A></B></td><br />
      </tr><br />
      <tr><br />
        <td><B><A href="http://www.it365cn.com/bbs/list.asp?forumid=2">Macromedia Fireworks</A></B></td><br />
      </tr><br />
      <tr><br />
        <td><strong><a href="http://www.it365cn.com/bbs/list.asp?forumid=8">ASP 专栏</a></strong></td><br />
      </tr><br />
      <tr><br />
        <td><B><A href="http://www.it365cn.com/bbs/list.asp?forumid=12">Web视觉设计</A></B></td><br />
      </tr><br />
    </table></td><br />
  </tr><br />
</table><br />
<table width="20%"  border="0" cellspacing="0" cellpadding="0"><br />
  <tr><br />
    <td> </td><br />
  </tr><br />
</table><br />
<table width="60%" border="0" cellspacing="2" cellpadding="4"><br />
  <tr><br />
    <td bgcolor="#999999" onclick="javascript:left_menu('left_2');"><strong><font color="#FFFFFF">=== 经典论坛Blueidea.com ===</font></strong></td><br />
  </tr><br />
  <tr><br />
    <td bgcolor="#f7f7f7" id="left_2" style="DISPLAY: none"><table width="60%" border="0" cellspacing="0" cellpadding="4"><br />
        <tr><br />
          <td><B><A <br />
href="http://www.blueidea.com/bbs/list.asp?GroupName=Dreamweaver+%26+Javascript%D7%A8%C0%B8">Dreamweaver & Javascript专栏</A></B></td><br />
        </tr><br />
        <tr><br />
          <td><B><A href="http://www.blueidea.com/bbs/list.asp?GroupName=Fireworks+%D7%A8%C0%B8">Fireworks 专栏</A> </B></td><br />
        </tr><br />
    </table></td><br />
  </tr><br />
</table><br />
<br />

[ 可以先修改再运行 ]

这个和L-BLOG以前的置顶贴的显示隐藏效果一样。但是实现的方法好像不一样。突然想到首页左下方，最近加了个天气，还加了其它乱七八糟的一些东西进去，变得不太美观，而且又把左边拉得很长。如果能把这个效果应用到首页中去，就可以让首页加载速度快一些，而且比较整洁。于是马上动脑动手。谁叫偶不懂写代码，改改总可以吧。

Z-BLOG首页左边是加载一个misc.asp来实现那些杂项的显示的，想来想去，干脆把反向链接也放进去算了，来个大杂烩。因此，只要修改一下default.html和misc.asp就行了。

首先，把上面的代码简化一下，因为只需要一个表格单元。然后再把一些属性按自己爱好修改一下，变成了：

<br />
<br />
<SCRIPT language=javascript><br />
<!--<br />
function left_menu(meval)<br />
{<br />
  var left_n=eval(meval);<br />
  if (left_n.style.display=="none")<br />
  { eval(meval+".style.display='';"); }<br />
  else<br />
  { eval(meval+".style.display='none';"); }<br />
}<br />
//document.all.left_sys.style.display='';<br />
//document.all.left_bm.style.display='none'<br />
--><br />
</SCRIPT><br />
<br />
<table width="180" border="0" cellpadding="0" cellspacing="0" bgcolor="#eeeade" align="left"><br />
  <tr><br />
    <td bgcolor="#eeeade" onclick="javascript:left_menu('left_1');"><strong><font color="#000000">[点此显示/隐藏]</font></strong></td><br />
  </tr><br />
  <tr><br />
    <td bgcolor="#eeeade" id="left_1" style="DISPLAY: none"><table width="120" border="0" cellspacing="0" cellpadding="0" align="left"><br />
      <tr><br />
        <td><br><li><a href="http://www.kenwong.cn/image/logo/logo.gif" target="_blank"><img src="http://www.kenwong.cn/image/logo/logo.gif" border="0" alt="本站LOGO" /></a></li><br />
<li><a href="rss.xml" target="_blank"><img src="image/logo/rss2.gif" height="15" width="80" border="0" alt="订阅本站内容的 RSS 2.0 新闻聚合" /></a><a href="atom.xml" target="_blank"><img src="image/logo/atom.gif" border="0" alt="订阅本站内容的 ATOM 1.0 新闻聚合" /></a></li><br />
<li><a href="http://asp.savalo.com/kenwong/sxna/" target="_blank"><img src="image/logo/sxna.gif" height="15" width="80" border="0" alt="已加入幻灭SXNA新闻聚合" /></a><a href="http://rss.fz0132.com/" target="_blank"><img src="image/logo/axna.png" height="15" width="80" border="0" alt="AlPar's Blog AXNA 1.44" /></a></li><br />
<li><img src="image/logo/utf8.png" height="15" width="80" border="0" alt="使用UTF-8 编码" /><a href="http://www.kenwong.cn/" target="_blank"><img src="image/logo/wap.gif" height="15" width="80" border="0" alt="本站支持 WAP 访问,地址:<br />
<%=ZC_BLOG_HOST%>wap" /></a></li><br />
<li><a href="http://www.mozilla.org/" target="_blank"><img src="image/logo/firefox.png" height="15" width="80" border="0" alt="为Mozilla FireFox优化" /></a><a href="http://www.rainbowsoft.org" target="_blank"><img src="image/logo/zblog8015.gif" height="15" width="80" border="0" alt="Powered By Z-Blog" /></a></li><br />
<li><iframe src="http://weather.265.com/weather.htm" width="160" height="54" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></li><br />
<li><iframe frameborder="0" height="100" srolling="no"  src="http://day8.com.cn/web/ro/google.asp?domain=www.kenwong.cn&rank=checked&google=checked&baidu=checked&yisou=checked&alexa=checked" width="160" title="附加统计信息加载中"></iframe></li><br />
<script language="javascript" type="text/javascript"><br />
function abDay(y,m,d) {<br />
today = new Date();<br />
apday = new Date(y,m-1,d);<br />
dayms = 24 * 60 * 60 * 1000;<br />
n = Math.floor((apday.getTime()-today.getTime())/dayms) + 1;<br />
document.write(-n);<br />
}<br />
</script><br />
<li>－－本站历史：<br />
<FONT color="#ff0000"><B><SCRIPT LANGUAGE="JavaScript"><br />
<!--<br />
abDay(2005,9,26);<br />
//--><br />
</SCRIPT></B></FONT> 天－－<br></li><br />
<li>In Love With CC：<br />
<FONT color="#ff0000"><B><SCRIPT LANGUAGE="JavaScript"><br />
<!--<br />
abDay(2004,12,25);<br />
//--><br />
</SCRIPT></B></FONT> days</li><br />
<li><b>反向链接</b></li><br />
<li><span id="referer"><br />
<script type="text/javascript" src="/feeler.asp"></script><br />
</li><br />
</td><br />
      </tr><br />
    </table></td><br />
  </tr><br />
</table><br />
<br />

[ 可以先修改再运行 ]

好了，现在什么都进去了misc.asp里面了，这样一来，打开首页时，它默认就是隐藏的，这样很好看，目的达到。
完成的效果如下图所示：
点击看大图

而且以后想再添加点什么进去，都不必担心会把首页弄乱了。但是在FireFox里面看，似乎不支持这个效果，点击显示不出来。不过算了，一向不太考虑FF的兼容。

肯定有更简单的实现方法的，但是偶自己不会写代码，希望各位高手赐教。谢谢。

以此为出发点，还可以实现其它有趣的效果。比如，把友情链接也弄成默认隐藏的，点击可展开；另外加个公告之类的在某个地方，都不占位置。有空再试试。

« 实用邮箱 | Main | JAY周杰伦05年度最新大碟——<11月的萧... »