| 树形菜单效果3 |
| 作者：小雨 文章来源：本站原创 点击数： 更新时间：2005-4-19 11:01:42 |
|
|
<SCRIPT>numTotal=8;scores[1]='KB1';scores[2]='KB1';scores[3]='KB2';scores[4]='KB3';scores[5]='KB4';scores[6]='KB5';scores[7]='KB6';scores[8]='KB7';scores[9]='KB8';</SCRIPT>
可以复制生成更多的栏目和子栏目，请修改以上标记的位置：numTotal=8;（几个栏目），scores[1]='KB1'（子栏目的标记）记得在添加新栏目时修改：<div id='KB1Parent' class='parent'><a href="#" onClick="expandIt('KB1'); return false">内的红色部分。
脚本说明:第一步:把如下代码加入<head>区域中，大家只需要把其中的链接地址和blank.gif、plus.gif两个图片改成你想要的即可！
<script language="javascript1.2">
scores = new Array(20);var numTotal=0;NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); }}function getIndex(el) { ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind;}function arrange() { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } }}function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } }}function expandIt(el) { if (!ver4) return; if (IE4) { whichEl1 = eval(el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval(scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.style.display = "none"; } } whichEl1 = eval(el + "Child"); if (whichEl1.style.display == "none") { whichEl1.style.display = "block"; } else { whichEl1.style.display = "none"; } } else { whichEl = eval("document." + el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval("document." + scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.visibility = "hide"; } } if (whichEl.visibility == "hide") { whichEl.visibility = "show"; } else { whichEl.visibility = "hide"; } arrange(); }}onload = initIt;
</script>
第二步:把如下代码加入<body>区域中
<div id='KB1Parent' class='parent'><a href="#" onClick="expandIt('KB1'); return false"><br>
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>影视频道</font></strong></a></div>
<div id='KB1Child' class='parent'><a href='../movie/xiju/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>喜剧片</a><br>
<a href='../movie/kehuan/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>科幻片</a><br>
<a href='../movie/dongzuo/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>动作片</a><br>
<a href='../movie/zhanzhen/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>战争片</a><br>
<a href='../movie/kongbu/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>恐怖片</a><br>
<a href='../movie/donghua/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>动画片</a><br>
<a href='time8.htm' target='_target'> <IMG SRC='blank.gif' BORDER=0>生活片</a><br>
<a href='../movie/lianxuju/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>连续剧</a><br>
<a href='../movie/aiqing/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>爱情片</a><br>
<a href='../movie/zongyi/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>综艺节目</a><br>
<a href='../movie/xiaomovie/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>小电影</a></div>
<div id='KB2Parent' class='parent'><a href="#" onClick="expandIt('KB2'); return false">
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>音乐频道</font></strong></a></div>
<div id='KB2Child' class='child'>
<a href='../movie/mv/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>音乐MTV</a><br>
<a href='../music/dj/dj.htm' target='_target'> <IMG SRC='blank.gif' BORDER=0>火爆舞曲</a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=1' target='_target'> <IMG SRC='blank.gif' BORDER=0>华人男歌 </a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=2' target='_target'> <IMG SRC='blank.gif' BORDER=0>华人女歌 </a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=3' target='_target'> <IMG SRC='blank.gif' BORDER=0>华人组合</a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=5' target='_target'> <IMG SRC='blank.gif' BORDER=0>日韩男歌 </a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=6' target='_target'> <IMG SRC='blank.gif' BORDER=0>日韩女歌 </a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=7' target='_target'> <IMG SRC='blank.gif' BORDER=0>日韩组合</a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=9' target='_target'> <IMG SRC='blank.gif' BORDER=0>欧美歌曲 </a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=12' target='_target'> <IMG SRC='blank.gif' BORDER=0>影视歌曲 </a><br>
<a href='../music/date/Artlist.asp?Name=Yxmusic&ID=14' target='_target'> <IMG SRC='blank.gif' BORDER=0>合辑其他 </a><br>
<a href='../music/date/new.asp' target='_target'> <IMG SRC='blank.gif' BORDER=0>今日更新 </a><br>
<a href='dao11.htm' target='_target'> <IMG SRC='blank.gif' BORDER=0>经典老歌 </a><br>
<a href='dao11.htm' target='_target'> <IMG SRC='blank.gif' BORDER=0>流行金曲</a></div>
<div id='KB3Parent' class='parent'><a href="#" onClick="expandIt('KB3'); return false">
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>QQ家园</font></strong></a></div>
<div id='KB3Child' class='child'>
<a href='../Article/QQ/qqpifu/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ皮肤</a><br>
<a href='../Article/QQ/qqbiaoqing/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ表情</a><br>
<a href='../Article/QQ/qqzhuomian/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ桌面</a><br>
<a href='../Article/QQ/qqshiyong/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ使用</a><br>
<a href='../Article/QQ/qqmiji/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ密籍</a><br>
<a href='../Article/QQ/qqheka/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ贺卡</a><br>
<a href='../Article/QQ/qqgame/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ游戏</a><br>
<a href='../Article/QQ/qqdu/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ安全</a><br>
<a href='../Article/QQ/qqdown/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ下载</a><br>
<a href='../Article/QQ/qqliaotian/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ聊天宝典</a><br>
<a href='../Article/QQ/qqzawen/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ杂文</a><br>
<a href='../Article/QQ/qqceshi/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>QQ测试</a></div>
<div id='KB4Parent' class='parent'><a href="#" onClick="expandIt('KB4'); return false">
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>电脑网络</font></strong></a></div>
<div id='KB4Child' class='child'>
<a href='../Article/computer/wangye/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>网页制作</a><br>
<a href='../Article/computer/xitong/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>操作系统</a><br>
<a href='../Article/computer/anquan/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>系统安全</a><br>
<a href='../Article/computer/wangluo/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>网络工程</a><br>
<a href='../Article/computer/yinyong/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>工具软件</a><br>
<a href='../Article/computer/Su-Cai/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>设计素材</a><br>
<a href='../Article/computer/duomeiti/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>多媒体</a><br>
<a href='../Article/computer/bianchen/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>编程开发</a><br>
<a href='../Article/computer/xitong/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>艺术设计</a><br>
<a href='../Article/computer/hei/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>黑客帝国</a><br>
<a href='../Article/computer/shuma/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>游戏娱乐</a><br>
</div>
<div id='KB5Parent' class='parent'><a href="#" onClick="expandIt('KB5'); return false">
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>软件下载</font></strong></a></div>
<div id='KB5Child' class='child'>
<a href='../Soft/ShowClass.asp?ClassID=64' target='_target'> <IMG SRC='blank.gif' BORDER=0>本站发布</a><br>
<a href='../Soft/ShowClass.asp?ClassID=110' target='_target'> <IMG SRC='blank.gif' BORDER=0>推荐软件</a><br>
<a href='../down/sort.asp?id=01' target='_target'> <IMG SRC='blank.gif' BORDER=0>网络软件 </a><br>
<a href='../down/sort.asp?id=02' target='_target'> <IMG SRC='blank.gif' BORDER=0>系统工具 </a><br>
<a href='../down/sort.asp?id=03' target='_target'> <IMG SRC='blank.gif' BORDER=0>应用软件</a><br>
<a href='../down/sort.asp?id=04' target='_target'> <IMG SRC='blank.gif' BORDER=0>聊天软件</a><br>
<a href='../down/sort.asp?id=05' target='_target'> <IMG SRC='blank.gif' BORDER=0>图形图像</a><br>
<a href='../down/sort.asp?id=06' target='_target'> <IMG SRC='blank.gif' BORDER=0>多媒体类</a><br>
<a href='../down/sort.asp?id=08' target='_target'> <IMG SRC='blank.gif' BORDER=0>游戏娱乐</a><br>
<a href='../down/sort.asp?id=09' target='_target'> <IMG SRC='blank.gif' BORDER=0>编程开发</a><br>
<a href='../down/sort.asp?id=10' target='_target'> <IMG SRC='blank.gif' BORDER=0>安全相关</a><br>
<a href='../down/sort.asp?id=11' target='_target'> <IMG SRC='blank.gif' BORDER=0>教育教学</a><br>
<a href='../down/sort.asp?id=07' target='_target'> <IMG SRC='blank.gif' BORDER=0>行业软件</a></div>
<div id='KB6Parent' class='parent'><a href="#" onClick="expandIt('KB6'); return false">
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>图片频道</font></strong></a></div>
<div id='KB6Child' class='child'>
<a href='Photo/ShowClass.asp?ClassID=1' target='_target'> <IMG SRC='blank.gif' BORDER=0>可爱图片</a><br>
<a href='../joke/picclass.asp' target='_target'> <IMG SRC='blank.gif' BORDER=0>搞笑图片</a><br>
<a href='Photo/ShowClass.asp?ClassID=191' target='_target'> <IMG SRC='blank.gif' BORDER=0>桌面壁纸</a><br>
<a href='../Article/computer/Su-Cai/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>设计素材</a><br>
<a href='Photo/ShowClass.asp?ClassID=9' target='_target'> <IMG SRC='blank.gif' BORDER=0>游戏卡通</a><br>
<a href='Photo/ShowClass.asp?ClassID=10' target='_target'> <IMG SRC='blank.gif' BORDER=0>写真图片</a><br>
<a href='Photo/ShowClass.asp?ClassID=140' target='_target'> <IMG SRC='blank.gif' BORDER=0>数码图片</a><br>
<a href='Photo/ShowClass.asp?ClassID=9' target='_target'> <IMG SRC='blank.gif' BORDER=0>风景图片</a></div>
<div id='KB7Parent' class='parent'><a href="#" onClick="expandIt('KB7'); return false">
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>笑话频道</font></strong></a></div>
<div id='KB7Child' class='child'>
<a href='../joke/class.asp?sort=吹牛笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>吹牛笑话</a><br>
<a href='../joke/class.asp?sort=智慧笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>智慧笑话</a><br>
<a href='../joke/class.asp?sort=校园笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>校园笑话</a><br>
<a href='../joke/class.asp?sort=宗教笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>宗教笑话</a><br>
<a href='../joke/class.asp?sort=体育笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>体育笑话</a><br>
<a href='../joke/class.asp?sort=古代笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>古代笑话</a><br>
<a href='../joke/class.asp?sort=电脑笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>电脑笑话</a><br>
<a href='../joke/class.asp?sort=夫妻笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>夫妻笑话</a><br>
<a href='../joke/class.asp?sort=成人笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>成人笑话</a><br>
<a href='../joke/class.asp?sort=开心笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>开心笑话</a><br>
<a href='../joke/class.asp?sort=愚人笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>愚人笑话</a><br>
<a href='../joke/class.asp?sort=名人笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>名人笑话</a><br>
<a href='../joke/class.asp?sort=交通笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>交通笑话</a><br>
<a href='../joke/class.asp?sort=现代笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>现代笑话</a><br>
<a href='../joke/class.asp?sort=军事笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>军事笑话</a><br>
<a href='../joke/class.asp?sort=电脑笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>电脑笑话</a><br>
<a href='../joke/class.asp?sort=家庭笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>家庭笑话</a><br>
<a href='../joke/class.asp?sort=医疗笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>医疗笑话</a><br>
<a href='../joke/class.asp?sort=儿童笑话' target='_target'> <IMG SRC='blank.gif' BORDER=0>儿童笑话</a></div>
<div id='KB8Parent' class='parent'><a href="#" onClick="expandIt('KB8'); return false">
<IMG SRC='plus.gif' BORDER=0><strong><font color=#ffffff>其它栏目</font></strong></a></div>
<div id='KB8Child' class='child'>
<a href='../Article/love/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>情感文章</a><br>
<a href='../Article/xiaoshuo/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>经典杂文</a><br>
<a href='../Article/weixingxiaoshuo/Index.html' target='_target'> <IMG SRC='blank.gif' BORDER=0>微型小说</a></div>
<SCRIPT>numTotal=8;scores[1]='KB1';scores[2]='KB1';scores[3]='KB2';scores[4]='KB3';scores[5]='KB4';scores[6]='KB5';scores[7]='KB6';scores[8]='KB7';scores[9]='KB8';</SCRIPT>
-
|
|
| 文章录入：admin 责任编辑：小雨 |
|
上一篇文章： 不同链接地址显示不同背景色
下一篇文章： 树形菜单效果2 |
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
|
|
|
首页 
用户登录 
新用户注册 
（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
