用JS写一个网站树形菜单 |
您所在的位置：网站首页 › js手写模板字符串 › 用JS写一个网站树形菜单 |
用JS写一个网站树形菜单
|
先上效果图：
主体内容就是侧边展示的一二三级菜单，树形结构的。 前端页面布局内容，页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级：  树形菜单：
 文学艺术
 先锋写作
小说散文
诗风词韵
贴图专区
真我风采
视频贴图
行行摄摄
Flash贴图
房产论坛
我要买房
楼市话题
我要卖房
租房心语
二手市场
娱乐八卦
红楼一梦
笑话论坛
休闲生活
大话春秋
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; }JS内容我们用原生的JS很简单就写出来了，用show方法，获取到我们点击的块级元素的ID，给它添加display的样式，用if else语句来判断状态显示： function show(d1){ if(document.getElementById(d1).style.display=='block'){ document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态，即隐藏 } else{ document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态，即显示 } }这样就完成树形菜单的编辑了。
|
【本文地址】
今日新闻 |
推荐新闻 |