<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>无标题文档</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function menus(str,picId){
var obj, pic
// 返回 str 对象和 picId 对象是否存在
if (document.getElementById(str) &&document.getElementById(picId)){
obj=document.getElementById(str)//obj 为 DIV 对象
pic=document.getElementById(picId)//pic 为 图片对象
if (obj.style.display == "none"){ //如果DIV对象的 display 样式值为 none 的话
obj.style.display = ""//就将 display 的样式清空
pic.src = "0001.jpg"//更改图片对象的路径
}else{
obj.style.display = "none"
pic.src = "0000.jpg"
}
}
}
//-->
</script>
<style type="text/css">
<!--
.div1 {
cursor: hand
width: 100px
}
.div1_1{
cursor: hand
width: 100px
color: #666666
font-size: 14px
}
.div2 {
color: #666666
font-size: 12px
}
-->
</style>
</head>
<body>
<!--第一列的树-->
<div onClick="menus('menu1', 'pic1')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic1">语文</div>
<div id="menu1" style="display:none" class="div2">
<div onClick="menus('menu1_1', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">文言文</div><br/>
<div id="menu1_1" style="display:none" class="div2">
文言文1
</div>
<div onClick="menus('menu1_2', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">作文</div>
<div id="menu1_2" style="display:none" class="div2">
作文1
</div>
<div onClick="menus('menu1_3', 'pic1')" class="div1_1"><img src="0000.jpg" align="absmiddle" id="pic1">语法</div>
<div id="menu1_3" style="display:none" class="div2">
语法1
</div>
</div>
<!--第二列的树-->
<div onClick="menus('menu2', 'pic2')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic2">数学</div>
<div id="menu2" style="display:none" class="div2">
代数<br/>
几何<br/>
</div>
<!--第三列的树-->
<div onClick="menus('menu3', 'pic3')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic3">副科</div>
<div id="menu3" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
<div onClick="menus('menu4', 'pic4')" class="div1"><img src="0000.jpg" align="absmiddle" id="pic4">副科</div>
<div id="menu4" style="display:none" class="div2">
地理<br/>
生物<br/>
历史<br/>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<meta name="author" content="心梦缘ocean ocl" />
<title>My tree demo</title>
<style type="text/css">
/*主页面样式*/
.leftNav {
width: 20%
height:500px
border:#B9E0F7 1px solid
margin-left: 1%
margin-right: 1%
}
#footer {
color:#808080
line-height: 1.6em
padding: 0 0 1em 0
}
/*我的树样式表*/
.treeDiv {
color: #636363
font-size: 14px
font-weight: normal
background-color: #fff
color: black
overflow: auto
padding: 0 0 1em 0
overflow-x: hidden
}
.treeNode {
white-space: nowrap
text-indent: -14px
margin: 6px 2px 5px 14px
}
a.treeUnselected:hover, a.treeSelected:hover {
background-color: #BFD9ED
text-decoration: none
}
a.treeUnselected, a.treeSelected {
color: black
padding: 1px 3px 1px 0
text-decoration: none
}
a.treeSelected {
background-color: #B9E0F7
}
a.treeUnselected {
background-color: transparent
}
.treeSubnodes {
display: block
}
.treeSubnodesHidden {
display: none
}
.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {
height: 15px
margin-left: 5px
margin-right: 0px
width: 15px
}
.treeNode img.treeLinkImage {
cursor: pointer
}
div.treeNode a, div.treeNode span.apiRoot {
display: inline-block
margin-left: 24px
text-indent: 0
white-space: normal
width: 95%
word-wrap: break-word
}
div.treeNode span.category {
cursor: pointer
}
</style>
</head>
<body>
<div class="leftNav">
<div id="samplesToc">
<div id="tree" style="top: 35pxleft: 0px" class="treeDiv">
<div id="treeRoot" onselectstart="return false" ondragstart="return false">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一子目录 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点二</a>
</div>
</div>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点六</a>
</div>
</div>
</div>
<!--end block-->
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点二</span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>
</div>
</div>
</div>
<!--end block-->
</div>
</div>
</div><!-- end samplesToc -->
</div><!-- end leftNav -->
<div class="right content">
</div><!-- end main content-->
<div id="footer" align="center">
</div><!-- end footer-->
<script type="text/javascript">
var treeSelected = null//选中的树节点
var imgPlus = new Image()
imgPlus.src="../graphics/treenodeplus.gif"
var imgMinus = new Image()
imgMinus.src="../graphics/treenodeminus.gif"
//父节点展开事件
function expandCollapse(el)
{
//如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点
if (el.className!= "treeNode"){
return //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode
}
var child
var imgEl//图片子节点，在树展开时更换图片
for(var i=0i <el.childNodes.lengthi++)
{
child = el.childNodes[i]
if (child.src)
{
imgEl = child
}
else if (child.className == "treeSubnodesHidden")
{
child.className = "treeSubnodes"//原来若隐藏，则展开
imgEl.src = imgMinus.src//更换图片
break
}
else if (child.className == "treeSubnodes")
{
child.className = "treeSubnodesHidden"//原来若展开，则隐藏
imgEl.src = imgPlus.src//更换图片
break
}
}
}
//子节点点击事件，设置选中节点的样式
function clickAnchor(el)
{
selectNode(el.parentNode)
el.blur()
}
function selectNode(el)
{
if (treeSelected != null)
{
setSubNodeClass(treeSelected, 'A', 'treeUnselected')
}
setSubNodeClass(el, 'A', 'treeSelected')
treeSelected = el
}
function setSubNodeClass(el, nodeName, className)
{
var child
for (var i=0i <el.childNodes.lengthi++)
{
child = el.childNodes[i]
if (child.nodeName == nodeName)
{
child.className = className
break
}
}
}
</script>
</body>
</html>
运行效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）