html,css,js 实现树形菜单栏

效果展示:

声明:文字前为图片,引入即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>树形菜单</title></head><style>.box{width: 180px;border: 1px solid red;padding-left: 10px;}a{font-size: 15px;color:aqua;text-decoration:none;}a:hover{font-size: 17px;color: #999999;}</style><body><div class="box"><div><a href="javascript:onClick=show('1')"><img src="data:image/z-1.jpg"/>分类讨论区</a></div><div id="1"><img src="data:image/z-top.gif" /> BBS系统<br><img src="data:image/z-top.gif">共建水木<br><img src="data:image/z-top.gif">站务公告栏<br><img src="data:image/z-top.gif">妆点水木<br><img src="data:image/z-end.gif">申请版主<br></div><div><a href="javascript:onClick=show('2')"><img src="data:image/z-2.jpg" >社会信息</a></div><div id="2"><img src="data:image/z-top.gif">美容品与饰品代理<br><img src="data:image/z-top.gif">考研资料市场<br><img src="data:image/z-top.gif">商海纵横<br><img src="data:image/z-top.gif">动物保护者<br><img src="data:image/z-top.gif">动物世界<br><img src="data:image/z-end.gif">中国风·神州各地<br></div><div><a href="javascript:onClick=show('3')"><img src="data:image/z-3.jpg">休闲娱乐</a></div><div id="3"><img src="data:image/z-top.gif">ASCIIart全国转信<br><img src="data:image/z-top.gif">七彩水木<br><img src="data:image/z-top.gif">网友聚会<br><img src="data:image/z-top.gif">醉品人生<br><img src="data:image/z-top.gif">花木园艺<br><img src="data:image/z-end.gif">祝福<br></div><div><a href="javascript:onClick=show('4')"><img src="data:image/z-4.jpg">电脑技术</a></div><div id="4"><img src="data:image/z-top.gif">BBS安装管理<br><img src="data:image/z-top.gif">CAD技术<br><img src="data:image/z-top.gif">数字图像设计<br><img src="data:image/z-top.gif">电脑音乐制作<br><img src="data:image/z-top.gif">软件加密与解密<br><img src="data:image/z-end.gif">计算机体系结构<br></div></div><script>function show(d1){if (document.getElementById(d1).style.display == 'none') {document.getElementById(d1).style.display = 'block'; //触动的层如果处于隐藏状态，即显示} else {document.getElementById(d1).style.display = 'none'; //触动的层如果处于显示状态，即隐藏}}</script></body>
</html>

html,css,js 实现树形菜单栏相关推荐

用html+css+js实现一个无限级树形控件
题目描述: 用html+css+js实现一个无限级树形控件,功能如下: 1.利用html.css展示一个树形菜单 2.点击箭头图标展开子项 3.点击父节点勾选图标能全选或全取消,点击叶节点勾选图标可以 ...
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)
HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适 ...
基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
sublime插件 —— 一键美化HTML/CSS/JS代码
当我们在设计网页页面的时候,如果页面元素有很多,使用HTML-CSS-JS Prettify可以快速整理我们的代码结构,让代码缩进合适,删除多余的空格/空行,安装步骤如下. step1:使用Sub ...
web课程设计网页规划与设计~时尚服装购物商城模板html源码(HTML+CSS+JS)
HTML网页设计结课作业~橙色时尚服装购物商城模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等 ...
大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
国漫大鱼海棠主题,本套大作业共计10个页面,页面美观度较高,网页在细节设计上花了很大功夫,如边框.阴影,鼠标滑过效果等,运用的知识点有:Div+CSS.JS轮播图.Table.下拉菜单栏.视频.表单. ...
【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty\j ...
html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
css/js压缩工具
css/js压缩工具 http://ajaxmin.codeplex.com/
html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...

html,css,js 实现树形菜单栏

效果展示:

html,css,js 实现树形菜单栏相关推荐

最新文章

热门文章