jsntghf
- 浏览: 2545863 次
- 性别:
- 来自: 苏州
-
文章分类
最新评论
-
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 1472这是一个类似iPhone、android等手机的密码输入体 ... -
日历控件
2012-06-29 20:12 1572<link rel="styleshee ... -
渐变打分条
2011-11-05 10:33 1664<!DOCTYPE html PUBLIC &qu ... -
滚动新闻
2011-10-28 15:17 1161<div id="marquees" ... -
网页配色
2011-10-10 09:18 1731至于为什么要使用网页配色工具，而不是自己配色，主要原因就是：对 ... -
圆角文本框的实现
2011-10-09 09:22 3397<!DOCTYPE HTML PUBLIC " ... -
javascript加载xml，在chrome下失败的解决办法
2011-09-30 09:40 4770原来的写法： this.loadxml = funct ... -
可输入文本的下拉框
2011-09-28 13:14 1395<html> <head> ... -
不规则菜单
2011-09-16 09:31 1326<!DOCTYPE html PUBLIC " ... -
二级树形菜单
2011-09-13 19:11 1318<!DOCTYPE html PUBLIC &qu ... -
随机显示图片
2011-09-10 18:13 1348<!DOCTYPE html PUBLIC " ... -
滚动字幕效果
2011-09-07 17:40 1425<!DOCTYPE html PUBLIC " ... -
美化select
2011-09-06 16:50 1347<!DOCTYPE html PUBLIC " ... -
无图片圆角
2011-09-05 15:10 1400<!DOCTYPE HTML PUBLIC " ... -
设置滚动条的颜色
2011-08-11 10:01 1764<style type="text/css&q ... -
CSS细线表格
2011-08-09 13:23 1544<style type="text/css&q ... -
分页效果
2011-08-06 19:52 1295<!DOCTYPE html PUBLIC &qu ... -
FormTools
2011-06-23 09:17 1398FormTools is a collection of ut ... -
表单当前行高亮的实现
2011-06-21 12:06 1453<!DOCTYPE html PUBLIC " ... -
使用jQuery实现复选框全选和取消全选
2011-06-16 08:54 1697<html> <head> ...
相关推荐
在这个“js+css简单后台二级树形菜单demo示例”中，我们将探讨如何利用JavaScript和CSS来创建一个后台管理界面的二级树形菜单。这个示例将涵盖以下几个关键知识点： 1. **HTML 结构**： - 树形菜单的基础是HTML的...
在网页设计中，二级树形菜单是一种常见的交互元素，它用于组织和展示层次结构的数据，如网站导航或复杂的选项列表。这种菜单结构通常由主菜单项和子菜单项组成，子菜单项在用户悬停或点击主菜单项时展开。在本示例中...
在这个场景中，"带复选框二级树形菜单"是一个功能丰富的组件，它结合了jQuery技术，以实现用户友好的、可操作的二级树状结构。 首先，我们要理解什么是jQuery。jQuery是一个广泛使用的JavaScript库，它简化了HTML...
JavaScript二级树形菜单是一种在网页中实现类似Windows操作系统下多级菜单效果的技术。它通过JavaScript动态构建和控制，提供了一种交互式的用户界面，让用户能够更直观地浏览和操作复杂的数据结构，尤其适用于网站...
### IT知识点：构建二级树形菜单的JS与CSS技术解析 在现代网页设计与开发中，树形菜单作为导航和组织复杂数据结构的一种有效方式，被广泛应用于各种网站和应用程序中。本文将深入分析一段HTML、JavaScript（JS）与...
### 二级树形菜单的概念 二级树形菜单是一种在网页或应用程序界面中用于展示具有层次关系数据结构的导航菜单。它由两层菜单组成：第一层作为主菜单，第二层则是当用户交互（如鼠标悬停）时展开的子菜单。这种设计...
二级树形菜单示例：CSS TreeMenu
`截图.png`可能是系统实际运行效果的截图，展示了二级树形菜单在浏览器中的呈现方式。`images`目录可能包含了页面中使用的图片资源，如图标或者装饰性图像。 总结起来，这个ASP+ACCESS动态二级树形产品导航菜单利用...
二级树形菜单示例：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;...
根据提供的文件信息，我们可以提炼出以下关于使用JavaScript (JS)和层叠样式表 (CSS) 实现二级树形菜单 (TreeMenu) 的知识点。 ### 标题知识点 - **JS实现TreeMenu二级树形菜单**：这一知识点涉及使用JavaScript来...
在懒人建站网站提供的“二级树形菜单”压缩包中，可能包含了HTML、CSS和JavaScript文件，用于演示和实现这两种样式。通过学习和修改这些示例代码，开发者可以轻松地将这些菜单样式应用于自己的项目中，提升网站的...
在本文中，我们将探讨一个名为hovertree的jQuery插件，该插件用于实现二级树形菜单。hovertree是一个模仿京东网站风格的树形菜单插件，它提供了两种主题样式：银色和绿色。通过使用hovertree插件，开发者可以轻松...
在IT界，尤其是在网页开发中，树形菜单和二级菜单是常见的交互元素，它们用于组织和展示层次结构的信息。本文将深入探讨这两种菜单的概念、实现方式以及基于jQuery的树形菜单构建方法。 首先，让我们理解“树形菜单...
"CSS+Js二级树形菜单演示示例"是一个很好的学习资源，它结合了CSS（层叠样式表）和JavaScript（一种客户端脚本语言）来实现动态的二级树形菜单。这个示例不仅提供了视觉上的吸引力，还增加了用户的交互体验。 首先...
本文将深入探讨“三级树形菜单”这一主题。 一、树形菜单的概念 树形菜单，顾名思义，是呈现出类似树木分支结构的菜单，每个节点代表一个菜单项，可以有零个或多个子节点。这种菜单的结构清晰，易于理解，特别适合...
#### 二、无限级树形菜单的概念 “无限级树形菜单”是指可以在Web界面上展示具有无限层级结构的数据的一种控件。这种控件通常用于展示如组织结构、文件目录等具有层级关系的数据。为了实现这一功能，控件需要从...
在网页开发中，树形菜单是一种常见的用户界面元素，它能有效地组织和展示层次结构的信息。`dTree` 是一个JavaScript对象，专用于构建无限级的树形菜单。本篇文章将深入探讨如何利用`dTree`来生成动态的树形菜单，并...