jsntghf
- 浏览: 2476644 次
- 性别:
- 来自: 苏州
-
文章分类
最新评论
-
jsntghf：
peio 写道这个怎么运行？Ruby On Rails的环境搭 ...
多文件上传之uploadify -
peio：
这个怎么运行？
多文件上传之uploadify -
往事如烟1：
我的项目是自己init了一个原始的project，之后将ver ...
React Native热部署之CodePush -
jsntghf：
往事如烟1 写道我按照你的说明进行，发现app退出之后，在进入 ...
React Native热部署之CodePush -
往事如烟1：
我按照你的说明进行，发现app退出之后，在进入不正确，请问是什 ...
React Native热部署之CodePush
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级菜单</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:gray;text-align:center;}
#webtree{
width:200px;margin:0 auto;background:white;text-align:left;font: 12px/1.6em "Microsoft YaHei","微软雅黑","宋体",Verdana,arial,helvetica,sans-serif;padding-left:10px;
}
#webtree a:link,.webtree a:visited{
color:#336699;text-decoration:none;
}
#webtree a:hover,.webtree a:active{
color:#ff6600;text-decoration:underline;
}
#webtree dl dt{
color:gray;font-weight:bold;text-indent:20px;background:url(m.gif) no-repeat 0 1px;height:22px;line-height:22px;cursor: pointer;
}
#webtree ul{
padding-left:20px;list-style:none;
}
#webtree li{
text-indent:20px;background:url(n.gif) no-repeat 0 1px;width:160px;overflow: hidden; text-overflow:ellipsis;
}
#webtree span{
padding:1px;
}
</style>
</head>
<body>
<div id="webtree">
<dl>
<dt><span>A</span></dt>
<dd>
<ul>
<li><a href="">a1</a></li>
<li><a href="">a2</a></li>
<li><a href="">a3</a></li>
<li><a href="">a4</a></li>
</ul>
</dd>
<dt><span>B</span></dt>
<dd>
<ul>
<li><a href="">b1</a></li>
<li><a href="">b2</a></li>
<li><a href="">b3</a></li>
</ul>
</dd>
<dt><span>C</span></dt>
<dd>
<ul>
<li><a href="">c1</a></li>
<li><a href="">c2</a></li>
<li><a href="">c3</a></li>
<li><a href="">c4</a></li>
<li><a href="">c5</a></li>
</ul>
</dd>
<dt><span>D</span></dt>
<dd>
<ul>
<li><a href="">d1</a></li>
<li><a href="">d2</a></li>
<li><a href="">d3</a></li>
<li><a href="">d4</a></li>
<li><a href="">d5</a></li>
<li><a href="">d6</a></li>
</ul>
</dd>
<dt><span>E</span></dt>
<dd>
<ul>
<li><a href="">e1</a></li>
<li><a href="">e2</a></li>
<li><a href="">e3</a></li>
<li><a href="">e4</a></li>
<li><a href="">e5</a></li>
<li><a href="">e6</a></li>
</ul>
</dd>
</dl>
</div>
<script type="text/javascript">
var a = new Array;
var treeObj=document.getElementById("webtree").getElementsByTagName("dt");
for(var i=0;i<treeObj.length;i++){
treeObj[i].setAttribute('onclick','showObj(' + i + ');');
treeObj[i].id=i;
document.getElementById("webtree").getElementsByTagName("dd")[i].style.display="none";
}
for(var i=0;i<treeObj.length;i++){
treeObj[i].onclick=function(){
showObj(this.id);
}
}
function showObj(objId){
var obj=document.getElementById("webtree").getElementsByTagName("dd")[objId];
if(obj.style.display=="none"){
obj.style.display="";
document.getElementById("webtree").getElementsByTagName("dt")[objId].style.background="url(minus.gif) no-repeat 0 1px";
setSelectedClass(objId);
}else{
obj.style.display="none";
document.getElementById("webtree").getElementsByTagName("dt")[objId].style.background="url(m.gif) no-repeat 0 1px";
}
}
function setSelectedClass(objId){
var obj=document.getElementById("webtree").getElementsByTagName("dt");
for(var i=0;i<obj.length;i++){
var sObj=obj[i].getElementsByTagName("span")[0];
if(i==objId){
sObj.style.background="#f7f7f7";
sObj.style.border="1px solid gray";
}else{
sObj.style.background="white";
sObj.style.border="1px solid white";
}
}
}
</script>
</body>
</html>
效果图：
- demo.rar (1.7 KB)
- 下载次数: 3
分享到：
发表评论
-
密码输入延迟屏蔽
2013-05-19 20:06 1422这是一个类似iPhone、android等手机的密码输入体 ... -
日历控件
2012-06-29 20:12 1528<link rel="styleshee ... -
渐变打分条
2011-11-05 10:33 1620<!DOCTYPE html PUBLIC &qu ... -
滚动新闻
2011-10-28 15:17 1113<div id="marquees" ... -
网页配色
2011-10-10 09:18 1680至于为什么要使用网页配色工具，而不是自己配色，主要原因就是：对 ... -
圆角文本框的实现
2011-10-09 09:22 3342<!DOCTYPE HTML PUBLIC " ... -
javascript加载xml，在chrome下失败的解决办法
2011-09-30 09:40 4713原来的写法： this.loadxml = funct ... -
可输入文本的下拉框
2011-09-28 13:14 1323<html> <head> ... -
不规则菜单
2011-09-16 09:31 1281<!DOCTYPE html PUBLIC " ... -
二级树形菜单
2011-09-13 19:11 1269<!DOCTYPE html PUBLIC &qu ... -
随机显示图片
2011-09-10 18:13 1288<!DOCTYPE html PUBLIC " ... -
滚动字幕效果
2011-09-07 17:40 1382<!DOCTYPE html PUBLIC " ... -
美化select
2011-09-06 16:50 1297<!DOCTYPE html PUBLIC " ... -
无图片圆角
2011-09-05 15:10 1354<!DOCTYPE HTML PUBLIC " ... -
设置滚动条的颜色
2011-08-11 10:01 1677<style type="text/css&q ... -
CSS细线表格
2011-08-09 13:23 1499<style type="text/css&q ... -
分页效果
2011-08-06 19:52 1245<!DOCTYPE html PUBLIC &qu ... -
FormTools
2011-06-23 09:17 1344FormTools is a collection of ut ... -
表单当前行高亮的实现
2011-06-21 12:06 1398<!DOCTYPE html PUBLIC " ... -
使用jQuery实现复选框全选和取消全选
2011-06-16 08:54 1648<html> <head> ...
相关推荐
二级树形菜单示例：CSS+TreeMenu 二级树形菜单示例：CSS+TreeMenu
js+css简单后台二级树形菜单demo示例
二级树形菜单示例：CSS TreeMenu
javascript二级树形菜单，仿照windows的菜单制作的
二级树形菜单，二级树形菜单，只有两级哦，真的只有两级哦
基于jquery代码的树形菜单，适用于系统树形下拉菜单。
一个很好用的js树形菜单
二级树形菜单示例：CSS TreeMenu a,a:visited {color:#333;text-decoration:none;} a:hover {color:#f60;} body,td {font:13px “Geneva”,”宋体”, “Arial”, “Helvetica”,sans-serif;} ul,li {margin:0;...
二级菜单 树形菜单 基于jqurey的树形菜单
主要介绍了JS+CSS实现TreeMenu二级树形菜单,以完整实例形式较为详细的分析了JS二级树形菜单的节点元素操作技巧,非常简单实用,需要的朋友可以参考下
ASP+ACCESS动态二级树形产品导航菜单(黄生原创作品)
二级树形菜单,效果非常好的菜单框架,简单易用只需引用即可,在项目中非常好使
内容索引:脚本资源,Ajax/JavaScript,树形菜单 CSS+Js二级树形菜单演示示例，使用了不少的修饰图片，欢迎下载。
当用BaseExpandableListAdapter来实现二级树形菜单时，父项(getGroupView())和子项(getChildView())都是使用TextView。当要实现三级树形菜单时，子项(getChildView())就必须使用ExpandableList了。另
微信小程序 树形菜单组件 v2 需属性传值 listData（树形菜单数据） listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <wxTreeList listData="{{listData}}"></...
1用TreeView加VS做动态树形菜单（带节点互斥）.rar 2展开收缩带效果的演示 3.net的树形菜单 4AJAX实现的树形菜单 5二级树形菜单示例：CSS+TreeMenu.htm<br>6Treeview演示及使用指南 7struts+...
比较好用的树形菜单 站内商品 订单目录 订单问答 商品目录 海外代购 二级菜单 二级菜单 二级菜单 </div>