JavaScript - 高级树形菜单实例

简单的树形菜单


<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>

高级树形菜单


<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>


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部