先上效果图:

主体内容就是侧边展示的一二三级菜单,树形结构的。

前端页面布局内容,页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级:

<body>
<b><img src="data:images/fold.gif">树形菜单:</b>
<ul><a href="javascript:onclick=show('art') "><img src="data:images/fclose.gif">文学艺术</a></ul>
<ul id="art" class="no_circle" style="display: block;">
<li><img src="data:images/doc.gif">先锋写作</li>
<li> <img src="data:images/doc.gif">小说散文</li>
<li><img src="data:images/doc.gif">诗风词韵</li>
</ul>
<ul><a href="javascript:onclick=show('photo') "><img src="data:images/fclose.gif">贴图专区</a></ul>
<ul id="photo" class="no_circle" style="display: block;">
<li><img src="data:images/doc.gif">真我风采</li>
<li> <img src="data:images/doc.gif">视频贴图</li>
<li><img src="data:images/doc.gif">行行摄摄</li>
<li><img src="data:images/doc.gif">Flash贴图</li>
</ul>
<ul><a href="javascript:onclick=show('home') "><img src="data:images/fclose.gif">房产论坛</a></ul>
<ul id="home" class="no_circle" style="display: block;">
<li><img src="data:images/doc.gif">我要买房</li>
<li> <img src="data:images/doc.gif">楼市话题</li>
<li><img src="data:images/doc.gif">我要卖房</li>
<li><img src="data:images/doc.gif">租房心语</li>
<li><img src="data:images/doc.gif">二手市场</li>
</ul>
<ul><a href="javascript:onclick=show('game') "><img src="data:images/fclose.gif">娱乐八卦</a></ul>
<ul id="game" class="no_circle" style="display: block;">
<li><img src="data:images/doc.gif">红楼一梦</li>
<li> <img src="data:images/doc.gif">笑话论坛</li>
<li><img src="data:images/doc.gif">休闲生活</li>
<li><img src="data:images/doc.gif">大话春秋</li>
</ul> </body>

CSS样式很简单,根据个人喜好设置:

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

JS内容我们用原生的JS很简单就写出来了,用show方法,获取到我们点击的块级元素的ID,给它添加display的样式,用if else语句来判断状态显示:

<script type="text/javascript">
function show(d1){
if(document.getElementById(d1).style.display=='block'){
document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态,即隐藏
}
else{
document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态,即显示
}
}
</script>

这样就完成树形菜单的编辑了。

用JS写一个网站树形菜单的更多相关文章

  1. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  2. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. 写一个带文本菜单的程序,菜单项如下 (1) 取五个数的和 (2) 取五个数的平均值 (X) 退出。

    问题: 写一个带文本菜单的程序,菜单项如下(1)    取五个数的和 (2)     取五个数的平均值(X)    退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  6. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  7. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  8. 记录下使用iis7代理node.js写的网站程序

    昨天晚上一个学弟的紧急求救,说了自己接的单子做了一个网站,使用了自己熟悉的技术——node.js+mongdb,但当看到部署环境惊呆了,是 windows+sqlserver.这些都不是关键,关键是服 ...

  9. 【Part1】用JS写一个Blog(node + vue + mongoDB)

    学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...

随机推荐

  1. MySQL报Too many connections

    错误信息 Exception in thread "main" java.sql.SQLNonTransientConnectionException: Data source r ...

  2. 不高兴的津津(0)<P2004_1>

    不高兴的津津(unhappy.pas/c/cpp) [问题描述]  津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班.另外每周妈妈还会送她去学习朗诵. ...

  3. @implementer,抽象类,接口

    @implementer,抽象类,接口 1.      implementer 在看twisted源码时,经常出现@implementer(IReactorFDSet) 它来自zope.interfa ...

  4. PAT A1114 Family Property

    用并查集处理每个家庭的信息,注意标记~ #include<bits/stdc++.h> using namespace std; ; bool visit[maxn]={false}; i ...

  5. Linu计划任务/crontab命令

    周期性任务计划 相关程序包: cronie:主程序包,提供了crond守护进程及相关辅助工具 cronie-anacron:cronie的补充程序:用于监控cronie任务执行状况:如cronie中的 ...

  6. IP地址规划

    IP地址(Internet Protocol Address),缩写为IP Adress,是一种在Internet上的给主机统一编址的地址格式,也称为网络协议(IP协议)地址.它为互联网上的每一个网络 ...

  7. linux 部署java 项目命令

    1:服务器部署路径:/home/tomcat/tomcat/webapps  (用FTP工具链接服务器把包上传到此目录) 2:进入项目文件夹 cd /home/tomcat/tomcat/webapp ...

  8. <c:foreach>指定循环次数

    <c:forEach begin="0" end="4" var="i"> <c:set var="ans&qu ...

  9. vector的clear和swap

    vector的clear()操作只是清空vector的元素,而不会将内存释放掉 vector<int> vec1{ 1,2,3,4,5 }; vec1.clear(); cout<& ...

  10. 零基础学完Python的7大就业方向,哪个赚钱多?

    “ 我想学 Python,但是学完 Python 后都能干啥 ?” “ 现在学 Python,哪个方向最简单?哪个方向最吃香 ?” “ …… ” 相信不少 Python 的初学者,都会遇到上面的这些问 ...