tree.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<link type="text/css" href="css/tree.css" rel="stylesheet">
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "Opened")
{
o.parentNode.className = "Closed";
}
else
{
o.parentNode.className = "Opened";
}
}
}
</script>
</head>
<body>
<div class="TreeMenu" id="CategoryTree">
<ul>
<li class="Opened"><img class=s src="css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">123213</a>
<ul>
<li class="Opened"><img class=s src="css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">1232131</a>
<ul>
<li class="Opened"><img class=s src="css/s.gif" onclick="javascript:ChangeStatus(this);"><a href="#">JavaScript</a>
<ul>
<li class="Child"><img class=s src="css/s.gif"><a href="#">1111111</a></li>
<li class="Child"><img class=s src="css/s.gif"><a href="#">22233332</a></li>
<li class="Child"><img class=s src="css/s.gif"><a href="#">3333444</a></li>
<li class="Child"><img class=s src="css/s.gif"><a href="#">44444444</a></li>
<li class="Child"><img class=s src="css/s.gif"><a href="#">55555555</a></li>
<li class="Child"><img class=s src="css/s.gif"><a href="#">66666666</a></li>
<li class="Child"><img class=s src="css/s.gif"><a href="#">777777777</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
tree.css
a
{
text-decoration:none;
}
a,a:visited
{
color:#000;
background:inherit;
}
body
{
margin:0;
padding:20px;
font:12px tahoma,宋体,sans-serif;
}
dt
{
font-size:22px;
font-weight:bold;
margin:0 0 0 15px;
}
dd
{
margin:0 0 0 15px;
}
h4
{
margin:0;
padding:0;
font-size:18px;
text-align:center;
}
p
{
margin:0;
padding:0 0 0 18px;
}
p a,p a:visited
{
color:#00f;
background:inherit;
}
.TreeMenu img.s
{
cursor:hand;
vertical-align:middle;
}
.TreeMenu ul
{
padding:0;
}
.TreeMenu li
{
list-style:none;
padding:0;
}
.Closed ul
{
display:none;
}
.Child img.s
{
background:none;
cursor:default;
}
#CategoryTree ul
{
margin:0 0 0 17px;
}
#CategoryTree img.s
{
width:34px;
height:18px;
}
#CategoryTree .Opened img.s
{
background:url(skin3/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Closed img.s
{
background:url(skin3/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{
background:url(skin3/child.gif) no-repeat 13px 2px;
}
#CategoryTree
{
float:left;
width:249px;
border:1px solid #99BEEF;
background:#D2E4FC;
color:inherit;
margin:3px;
padding:3px;
}
效果图
