js树形菜单:Js+table实现的树形导航菜单效果源代码

on 2009-2-12 in Javascript教程 | 0 Comment


需要做树形导航菜单朋友可以看下我写这段代码是用JS+table实现也还算过去把呵呵喜欢支持下www.起加油自学成才！
<html>
<head>
<metahttp-equiv=\"Content-Type\"content=\"text/html;char=gb2312\">
<title>网页特效代码|JsCode.CN|---可折叠展开收缩效果栏目分类导航</title>
<styletype=\"text/css\">
td{font-size:12px;
}
</style>
</head>

<body>

<tablewidth=\"200\"height=\"250\"border=\"0\"align=\"center\"
cellpadding=\"0\"cellspacing=\"0\">
<tr>
<tdheight=\"38\">
<imgheight=\"38\"src=\"images/leftlist_head.jpg\"width=\"200\"/>
</td>
</tr>
<tr>
<tdalign=\"center\"valign=\"top\"background=\"images/leftlist_bg.jpg\">
<scriptlanguage=\"javascript\"id=\"clientEventHandlersJS\">
<!--
varnumber=8;

functionLMYC{
varlbmc;
//vartreePic;
for(i=1;i<=number;i){
lbmc=eval(’LM’+i);
//treePic=eval(’treePic’+i);
//treePic.src=’images/file.g’;
lbmc.style.display=’none’; [Page]
}
}

functionShowFLT(i){
lbmc=eval(’LM’+i);
//treePic=eval(’treePic’+i)
(lbmc.style.display’none’){
LMYC;
//treePic.src=’images/nofile.g’;
lbmc.style.display=’’;
}
{
//treePic.src=’images/file.g’;
lbmc.style.display=’none’;
}
}
//-->
</script>
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"88%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">
<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\"
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(1)\"href=\"javascript:void(null)\">


文管产品</a>
</td> [Page]
</tr>
<trid=\"LM1\"style=\"DISPLAY:none\">
<td>
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"文件夹\"href=\"http://www.jscode.cn\"target=\"_parent\">
文件夹</a> [Page]
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"


align=\"absMiddle\">
<atitle=\"资料册\"href=\"http://www.jscode.cn\"target=\"_parent\"> [Page]
资料册</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\"> [Page]
<atitle=\"档案盒\"href=\"http://www.jscode.cn\"target=\"_parent\">
档案盒</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>


</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\" [Page]
align=\"absMiddle\">
<atitle=\"文件盒\"href=\"http://www.jscode.cn\"target=\"_parent\">
文件盒</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\"> [Page]
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"文件柜\"href=\"http://www.jscode.cn\"target=\"_parent\">
文件柜</a>


</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr> [Page]
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"公文包\"href=\"http://www.jscode.cn\"target=\"_parent\">
公文包</a>
</td>
</tr>
<tr> [Page]
<tdbackgroundheight=\"3\"></td>
</tr>
</table>
</td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">


<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\"
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(2)\"href=\"javascript:void(null)\">
桌面文具</a>
</td> [Page]
</tr>
<trid=\"LM2\"style=\"DISPLAY:none\">
<td>
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"削笔机\"href=\"http://www.jscode.cn\"target=\"_parent\">
削笔机</a> [Page]
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>


<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"订书机\"href=\"http://www.jscode.cn\"target=\"_parent\"> [Page]
订书机</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
</table>
</td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">
<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\" [Page]
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(3)\"href=\"javascript:void(null)\">
商用机器</a>


</td>
</tr>
<trid=\"LM3\"style=\"DISPLAY:none\">
<td>
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\" [Page]
align=\"absMiddle\">
<atitle=\"碎纸机\"href=\"http://www.jscode.cn\"target=\"_parent\">
碎纸机</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\"> [Page]
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">


<atitle=\"切纸刀\"href=\"http://www.jscode.cn\"target=\"_parent\">
切纸刀</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr> [Page]
</table>
</td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">
<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\"
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(4)\"href=\"javascript:void(null)\">
书写工具</a>
</td>
</tr>
<trid=\"LM4\">
<td> [Page]
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>


<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"中性笔\"href=\"http://www.jscode.cn\"target=\"_parent\">
中性笔</a>
</td>
</tr> [Page]
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"圆珠笔\"href=\"http://www.jscode.cn\"target=\"_parent\">
圆珠笔</a> [Page]
</td>
</tr>


<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"记号笔\"href=\"http://www.jscode.cn\"target=\"_parent\"> [Page]
记号笔</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\"> [Page]
<atitle=\"白板笔\"href=\"http://www.jscode.cn\"target=\"_parent\">


白板笔</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
</table>
</td>
</tr>
<tr> [Page]
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">
<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\"
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(5)\"href=\"javascript:void(null)\">
纸制品</a>
</td>
</tr>
<trid=\"LM5\"style=\"DISPLAY:none\">
<td>
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\"> [Page]


<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"传真纸\"href=\"http://jscode.cn\"target=\"_parent\">
传真纸</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr> [Page]
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"复印纸\"href=\"http://www.jscode.cn\"target=\"_parent\">
复印纸</a>
</td>
</tr>
<tr> [Page]


<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"复写纸\"href=\"http://www.jscode.cn\"target=\"_parent\">
复写纸</a>
</td> [Page]
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"便条纸\"href=\"http://www.jscode.cn\"target=\"_parent\">


便条纸</a> [Page]
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"百事贴\"href=\"http://www.jscode.cn\"target=\"_parent\"> [Page]
百事贴</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">


<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\"> [Page]
<atitle=\"皮面笔记本\"href=\"http://www.jscode.cn\"target=\"_parent\">
皮面笔记本</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
</table>
</td>
</tr>
<tr> [Page]
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">
<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\"
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(6)\"href=\"javascript:void(null)\">
办公电子</a>
</td>
</tr>
<trid=\"LM6\"style=\"DISPLAY:none\">


<td>
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\"> [Page]
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"计算器\"href=\"http://www.jscode.cn\"target=\"_parent\">
计算器</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr> [Page]
</table>
</td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">
<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\"
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(7)\"href=\"javascript:void(null)\">


IT周边产品</a>
</td>
</tr>
<trid=\"LM7\"style=\"DISPLAY:none\">
<td> [Page]
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"阅读架\"href=\"http://www.jscode.cn\"target=\"_parent\">
阅读架</a>
</td>
</tr> [Page]
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"


align=\"absMiddle\">
<atitle=\"CD保护\"href=\"http://www.jscode.cn\"target=\"_parent\">
CD保护</a> [Page]
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"光盘盒\"href=\"http://www.jscode.cn\"target=\"_parent\"> [Page]
光盘盒</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>


</tr>
</table>
</td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:20px\"backgroundheight=\"23\">
<imgheight=\"9\"src=\"images/bit05.g\"width=\"8\" [Page]
align=\"absMiddle\">
<aonclick=\"javascript:ShowFLT(8)\"href=\"javascript:void(null)\">
办公生活用品</a>
</td>
</tr>
<trid=\"LM8\"style=\"DISPLAY:none\">
<td>
<tablecellspacing=\"0\"cellpadding=\"0\"width=\"100%\"border=\"0\">
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\" [Page]
align=\"absMiddle\">
<atitle=\"清洁桶\"href=\"http://www.jscode.cn\"target=\"_parent\">
清洁桶</a>


</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\"> [Page]
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"白板\"href=\"http://www.jscode.cn\"target=\"_parent\">
白板</a>
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr> [Page]
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"


align=\"absMiddle\">
<atitle=\"网状文具\"href=\"http://www.jscode.cn\"target=\"_parent\">
网状文具</a>
</td>
</tr>
<tr> [Page]
<tdbackgroundheight=\"3\"></td>
</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"封箱器\"href=\"http://www.jscode.cn\"target=\"_parent\">
封箱器</a>
</td> [Page]
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>


</tr>
<tr>
<tdstyle=\"PADDING-LEFT:40px\"height=\"23\">
<imgheight=\"7\"src=\"images/bit06.g\"width=\"8\"
align=\"absMiddle\">
<atitle=\"购物袋\"href=\"http://www.jscode.cn\"target=\"_parent\">
购物袋</a> [Page]
</td>
</tr>
<tr>
<tdbackgroundheight=\"3\"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<tdheight=\"17\">
<imgheight=\"17\"src=\"images/leftlist_bottom.jpg\"width=\"200\"/> [Page]
</td>
</tr>
</table>
</body>
</html>
Tags:  jstable js源代码 js树形菜单

延伸阅读

最新评论

发表评论