JavaScript - 高级树形菜单实例
2015-04-26 08:20
288 查看
简单的树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>简单的树形菜单</title> <style type="text/css"> ul{ list-style:none; font-size:12px; display:none; } a{ text-decoration:none; font-size:13px; color:#666; } a:hover{ color:#ff7300; } </style> <script type="text/javascript"> function showList(){ if($("game").style.display=="none"){ $("game").style.display="block"; }else{ $("game").style.display="none"; } } function $(id){ return document.getElementById(id); } </script> </head> <body> <p><a href="javascript:showList();"><img src="images/fclose.gif"/>热门网游</a></p> <ul id="game"> <li><img src="images/doc.gif" />英雄联盟</li> <li><img src="images/doc.gif" />魔兽世界</li> <li><img src="images/doc.gif" />节奏大师</li> <li><img src="images/doc.gif" />天天酷跑</li> </ul> </body> </html>
高级树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>高级树形菜单</title> <style type="text/css"> ol{ display: none; } a:hover{ color:#ff7730; } </style> <script type="text/javascript"> function showList1(){ if($("first").style.display=="none"){ $("first").style.display="block"; $("second").style.display="none"; $("third").style.display="none"; $("fouth").style.display="none"; }else{ $("first").style.display="none"; $("second").style.display="none"; $("third").style.display="none"; $("fouth").style.display="none"; } } function showList2(){ if($("second").style.display=="none"){ $("second").style.display="block"; $("first").style.display="none"; $("third").style.display="none"; $("fouth").style.display="none"; }else{ $("second").style.display="none"; $("first").style.display="none"; $("third").style.display="none"; $("fouth").style.display="none"; } } function showList3(){ if($("third").style.display=="none"){ $("third").style.display="block"; $("first").style.display="none"; $("second").style.display="none"; $("fouth").style.display="none"; }else{ $("third").style.display="none"; $("first").style.display="none"; $("second").style.display="none"; $("fouth").style.display="none"; } } function showList4(){ if($("fouth").style.display=="none"){ $("fouth").style.display="block"; $("first").style.display="none"; $("second").style.display="none"; $("third").style.display="none"; }else{ $("fouth").style.display="none"; $("first").style.display="none"; $("second").style.display="none"; $("third").style.display="none"; } } function $(id){ return document.getElementById(id); } </script> </head> <body> <p><a href="javascript:showList1();"><img src="images/fclose.gif"/>注册认证</a></p> <ol id="first"> <li><img src="images/doc.gif" />注册激活</li> <li><img src="images/doc.gif" />安全认证</li> <li><img src="images/doc.gif" />支付宝认证</li> </ol> <p><a href="javascript:showList2();"><img src="images/fclose.gif"/>买家帮助</a></p> <ol id="second"> <li><img src="images/doc.gif" />买家管理</li> <li><img src="images/doc.gif" />买家注册</li> <li><img src="images/doc.gif" />买家评价</li> <li><img src="images/doc.gif" />买家退货</li> </ol> <p><a href="javascript:showList3();"><img src="images/fclose.gif"/>卖家帮助</a></p> <ol id="third"> <li><img src="images/doc.gif" />店铺设置</li> <li><img src="images/doc.gif" />店铺装修</li> <li><img src="images/doc.gif" />店铺发货</li> <li><img src="images/doc.gif" />店铺入库</li> </ol> <p><a href="javascript:showList4();"><img src="images/fclose.gif"/>个人资料修改</a></p> <ol id="fouth"> <li><img src="images/doc.gif" />修改密码</li> <li><img src="images/doc.gif" />修改图像</li> <li><img src="images/doc.gif" />修改手机号码</li> <li><img src="images/doc.gif" />修改信息</li> </ol> </body> </html>
相关文章推荐
- javascript 树形导航菜单实例代码
- [JavaScript]树形菜单 DOM 脚本编程实例
- 超多树形结构的JavaScript菜单实例
- javascript 树形导航菜单实例代码
- javascript树形菜单简单实例
- javascript实现树形菜单的方法
- 详解用JavaScript实现"树形菜单"效果
- 11个Javascript树形菜单
- JavaScript基础(9.左侧菜单实例)
- 动态生成javascript树形菜单
- 2015/12/12--javascript事件处理和部分高级javascript实例
- 2015/12/13 --高级javascript实例和部分javascript对象实例
- javascript动态生成树形菜单的方法
- 11个Javascript树形菜单
- Vue.js 递归组件实现树形菜单(实例分享)
- 折叠树形导航菜单实例
- JavaScript动态生成树形菜单创建表格
- 基于zTree树形菜单的使用实例
- javascript下拉列表中显示树形菜单的实现方法
- 高级 JavaScript 实例