代码简介:
JS+Table实现可折叠的商品分类导航,很实用的代码,尤其用在电子商务站。
代码内容:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS+Table实现可折叠的商品分类导航_网页代码站(www.webdm.cn)</title> </head> <style type="text/css"> td {font-size: 12px;} </style> </head> <body> <table width="200" height="250" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody> <tr> <td height="38"><img height="38" src="http://www.webdm.cn/images/20091230/leftlist_head.jpg" width="200" /></td> </tr> <tr> <td align="center" valign="top" background="http://www.webdm.cn/images/20091230/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 = 'http://www.webdm.cn/images/20091230/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 = 'http://www.webdm.cn/images/20091230/nofile.gif'; lbmc.style.display = ''; } else { //treePic.src = 'http://www.webdm.cn/images/20091230/file.gif'; lbmc.style.display = 'none'; } } //--> </script> <TABLE cellSpacing=0 cellPadding=0 width="88%" border=0> <TBODY> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=文件夹 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=资料册 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=档案盒 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=文件盒 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=文件柜 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=公文包 href="http://www.webdm.cn/" target=_parent>公文包</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=削笔机 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=订书机 href="http://www.webdm.cn/" target=_parent>订书机</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=碎纸机 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=切纸刀 href="http://www.webdm.cn/" target=_parent>切纸刀</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=中性笔 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=圆珠笔 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=记号笔 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=白板笔 href="http://www.webdm.cn/" target=_parent>白板笔</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=传真纸 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=复印纸 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=复写纸 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=便条纸 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=百事贴 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=皮面笔记本 href="http://www.webdm.cn/" target=_parent>皮面笔记本</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=计算器 href="http://www.webdm.cn/" target=_parent>计算器</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=阅读架 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=CD保护 href="http://www.webdm.cn/" 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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=光盘盒 href="http://www.webdm.cn/" target=_parent>光盘盒</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD style="PADDING-LEFT: 20px" background="" height=23><IMG height=9 src="http://www.webdm.cn/images/20091230/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> <TBODY> <TR> <TD style="PADDING-LEFT: 40px" height=23><IMG height=7 src="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=清洁桶 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=白板 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=网状文具 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=封箱器 href="http://www.webdm.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="http://www.webdm.cn/images/20091230/bit06.gif" width=8 align=absMiddle> <A title=购物袋 href="http://www.webdm.cn/" target=_parent>购物袋</A> </TD> </TR> <TR> <TD background="" height=3></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE></td> </tr> <tr> <td height="17"><img height="17" src="http://www.webdm.cn/images/20091230/leftlist_bottom.jpg" width="200" /></td> </tr> </tbody> </table> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/e7dbbdc2-7d36-4ef2-ab94-2b9a7df70efc.html