建站教学网,让你建站更便捷和轻松!QQ交流群:78085540
您当前的位置:首页 > 网页制作 > html/xhtml

折叠展开收缩效果的栏目分类导航

来源:建站教学网  时间:2010-01-07 16:30:23

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---可折叠展开收缩效果的栏目分类导航</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>

<body>

<table width="200" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
  <td height="38">
  <img height="38" src="images/leftlist_head.jpg" width="200" /></td>
 </tr>
 <tr>
  <td align="center" valign="top" background="images/leftlist_bg.jpg">
  <script language="javascript" id="clientEventHandlersJS">
<!--
var number=8;

function LMYC() {
var lbmc;
//var treePic;
    for (i=1;i<=number;i++) {
        lbmc = eval('LM' + i);
        //treePic = eval('treePic'+i);
        //treePic.src = 'images/file.gif';
        lbmc.style.display = 'none';
    }
}
 
function ShowFLT(i) {
    lbmc = eval('LM' + i);
    //treePic = eval('treePic' + i)
    if (lbmc.style.display == 'none') {
        LMYC();
        //treePic.src = 'images/nofile.gif';
        lbmc.style.display = '';
    }
    else {
        //treePic.src = 'images/file.gif';
        lbmc.style.display = 'none';
    }
}
//-->
      </script>
  <table cellspacing="0" cellpadding="0" width="88%" border="0">
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(1)" href="javascript:void(null)">
    文管产品</a> </td>
   </tr>
   <tr id="LM1" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="文件夹" href="http://www.jzread.com" target="_parent">
      文件夹</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="资料册" href="http://www.jzread.com" target="_parent">
      资料册</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="档案盒" href="http://www.jzread.com" target="_parent">
      档案盒</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="文件盒" href="http://www.jzread.com" target="_parent">
      文件盒</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="文件柜" href="http://www.jzread.com" target="_parent">
      文件柜</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="公文包" href="http://www.jzread.com" target="_parent">
      公文包</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(2)" href="javascript:void(null)">
    桌面文具</a> </td>
   </tr>
   <tr id="LM2" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="削笔机" href="http://www.jzread.com" target="_parent">
      削笔机</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>

     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="订书机" href="http://www.jzread.com" target="_parent">
      订书机</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(3)" href="javascript:void(null)">
    商用机器</a> </td>
   </tr>
   <tr id="LM3" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="碎纸机" href="http://www.jzread.com" target="_parent">
      碎纸机</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="切纸刀" href="http://www.jzread.com" target="_parent">
      切纸刀</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(4)" href="javascript:void(null)">
    书写工具</a> </td>
   </tr>
   <tr id="LM4">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="中性笔" href="http://www.jzread.com" target="_parent">
      中性笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="圆珠笔" href="http://www.jzread.com" target="_parent">
      圆珠笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="记号笔" href="http://www.jzread.com" target="_parent">
      记号笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="白板笔" href="http://www.jzread.com" target="_parent">
      白板笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(5)" href="javascript:void(null)">
    纸制品</a> </td>
   </tr>
   <tr id="LM5" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="传真纸" href="http://jscode.cn" target="_parent">
      传真纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="复印纸" href="http://www.jzread.com" target="_parent">
      复印纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="复写纸" href="http://www.jzread.com" target="_parent">
      复写纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="便条纸" href="http://www.jzread.com" target="_parent">
      便条纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="百事贴" href="http://www.jzread.com" target="_parent">
      百事贴</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="皮面笔记本" href="http://www.jzread.com" target="_parent">
      皮面笔记本</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(6)" href="javascript:void(null)">
    办公电子</a> </td>
   </tr>
   <tr id="LM6" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="计算器" href="http://www.jzread.com" target="_parent">
      计算器</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(7)" href="javascript:void(null)">
    IT周边产品</a> </td>
   </tr>
   <tr id="LM7" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="阅读架" href="http://www.jzread.com" target="_parent">
      阅读架</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="CD保护" href="http://www.jzread.com" target="_parent">
      CD保护</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="光盘盒" href="http://www.jzread.com" target="_parent">
      光盘盒</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="images/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(8)" href="javascript:void(null)">
    办公生活用品</a> </td>
   </tr>
   <tr id="LM8" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="清洁桶" href="http://www.jzread.com" target="_parent">
      清洁桶</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="白板" href="http://www.jzread.com" target="_parent">
      白板</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="网状文具" href="http://www.jzread.com" target="_parent">
      网状文具</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="封箱器" href="http://www.jzread.com" target="_parent">
      封箱器</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="images/bit06.gif" width="8" align="absMiddle">
      <a title="购物袋" href="http://www.jzread.com" target="_parent">
      购物袋</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </td>
 </tr>
 <tr>
  <td height="17">
  <img height="17" src="images/leftlist_bottom.jpg" width="200" /></td>
 </tr>
</table>

</body>

</html>

责任编辑:admin

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, JZREAD.COM, Inc. All Rights Reserved 联系QQ:568245346
皖ICP备09015033号