以下是 可折叠的商品分类代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="keywords" content="js代码,菜单导航,js广告代码,js特效代码" />
<meta name="description" content="此代码内容为可折叠的商品分类代码，属于站长常用代码" />
<title>可折叠的商品分类代码</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">
<tbody>
<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>
<tbody>
<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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=文件夹
href="#"
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="#"
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="#"
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="#"
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="#"
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="#"
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="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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=削笔机
href="#"
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="#"
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="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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=碎纸机
href="#"
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="#"
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="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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=中性笔
href="#"
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="#"
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="#"
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="#"
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="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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=传真纸
href="#"
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="#"
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="#"
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="#"
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="#"
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="#"
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="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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=计算器
href="#"
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="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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=阅读架
href="#"
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="#"
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="#"
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="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>
<tbody>
<tr>
<td style="padding-left: 40px" height=23><img height=7
src="images/bit06.gif" width=8 align=absmiddle> <a title=清洁桶
href="#"
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="#"
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="#"
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="#"
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="#"
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="images/leftlist_bottom.jpg"
width="200" /></td>
</tr>
</tbody>
</table>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
