制作树形菜单

最新推荐文章于 2021-12-29 11:58:00 发布

chaoyv

最新推荐文章于 2021-12-29 11:58:00 发布

阅读量216

点赞数

分类专栏： JS 粗浅文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/chaoyv/article/details/84508226

版权

JS 粗浅专栏收录该内容

48 篇文章 2 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作树形菜单</title>
<style type="text/css">
body {
	font-size:13px;
	line-height:20px;
}
a {
	font-size: 13px;
	color: #000000;
	text-decoration: none;
}
a:hover {
	font-size:13px;
	color: #ff0000;
}
img {
	vertical-align: middle;
	border:0;
}
.no_circle {
	list-style:none;
	display:none;
}
</style>
<script  type="text/javascript">
function show(name){
	if(document.getElementById(name).style.display=='block'){
	//触动的ul如果显示，即隐藏
	document.getElementById(name).style.display='none';
	}else{
	//触动的ul如果隐藏，即显示
	document.getElementById(name).style.display='block';
	}
}

</script>
</head>

<body>
<b><img src="images/fold.gif">树形菜单：</b>
<ul>
  <a href="javascript:show('art')"><img src="images/fclose.gif">文学艺术</a>
</ul>
<ul id="art" class="no_circle">
  <li><img src="images/doc.gif" >先锋写作</li>
  <li> <img src="images/doc.gif" >小说散文</li>
  <li><img src="images/doc.gif" >诗风词韵</li>
</ul>
<ul>
  <a href="javascript:show('photo')"><img src="images/fclose.gif">贴图专区</a>
</ul>
<ul id="photo"  class="no_circle">
  <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" >Flash贴图</li>
</ul>
<ul>
  <a href="javascript:show('home')"><img src="images/fclose.gif">房产论坛</a>
</ul>
<ul id="home"  class="no_circle">
  <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>
  <li><img src="images/doc.gif" >二手市场</li>
</ul>
<ul>
  <a href="javascript:show('game')"><img src="images/fclose.gif">娱乐八卦</a>
</ul>
<ul id="game"  class="no_circle">
  <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>

</body>
</html>

效果图：

个人E-mail：chaoyi77@163.com

chaoyv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作树形菜单

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;制作树形菜单&lt;/title&gt;&l
复制链接

扫一扫

专栏目录