«
»

可隐藏和打开的菜单效果

楚云 » 2004-12-15 12:41 » 技术天空

这是一个简单的隐藏打开菜单效果，代码简洁好用。

在文件头部加入以下JavaScript代码：

  1. <script language="javascript">
  2. function showtable(tid){
  3. whichtable=eval("tb"+tid);
  4. if(whichtable.style.display=="none"){
  5. eval("tb"+tid+".style.display=\"\";");
  6. }else{
  7. eval("tb"+tid+".style.display=\"none\";");
  8. }
  9. }
  10. </script>

在需要的页面里，加上类似程序：

  1. <table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
  2.   <tr>
  3.     <td height="25" bgcolor="#6699CC">
  4.       <table width="150" border="0" align="center" cellpadding="0" cellspacing="2" style="cursor:hand;" onclick="showtable(1)">
  5.         <tr>
  6.           <td width="20" align="center" valign="middle">
  7.             <img src="./images/collapsed.gif" width="11" height="11">
  8.           </td>
  9.           <td valign="middle">
  10.             <font color="#FFFFFF">产品管理</font>
  11.           </td>
  12.         </tr>
  13.       </table>
  14.     </td>
  15.   </tr>
  16.   <tr>
  17.     <td>
  18.       <table id="tb1" width="150" border="0" align="center" cellpadding="0" cellspacing="2" bgcolor="#EFEFEF" style="display:none;">
  19.         <tr>
  20.           <td width="20" height="20" align="center">
  21.             <img src="./images/expanded.gif" width="11" height="11">
  22.           </td>
  23.           <td>
  24.             <a href="./1.php" target="right">分类管理</a>
  25.           </td>
  26.         </tr>
  27.         <tr>
  28.           <td height="20" align="center">
  29.             <img src="./images/expanded.gif" width="11" height="11">
  30.           </td>
  31.           <td>
  32.             <a href="./2.php" target="right">产品管理</a>
  33.           </td>
  34.         </tr>
  35.       </table>
  36.     </td>
  37.   </tr>
  38. </table>

说明：

style=”cursor:hand;” //鼠标样式采用手形

onclick=”showtable(1)” //菜单标题对应显示和隐藏哪个表格

id=”table1″ //给放置菜单内容的表格命名

style=”display:none;” //设定菜单一开始是隐藏还是显示。如果没有这个参数，默认是显示的；有这个参数就是隐藏的。

你可以通过 RSS 2.0 地址订阅本文的回复.
你可以 说说你的想法, 或者从你自己的博客上 TrackBack 这篇文章.

说说你的想法