案例一：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function test(obj){
//myspan
if(obj.innerText=="+"){
//显示成员
myul.style.display="block";
obj.innerText="-";
}else if(obj.innerText=="-"){
myul.style.display="none";
obj.innerText="+";
}
}
</script>
<body>
<span id="myspan" onclick="test(this);" style="border: 3px solid red;cursor :hand;">+</span> java分类
<ul id="myul" style="display:none">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
</body>
</html>
案例二：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-size:12px;
}
.nav {
width:980px;
min-height:30px;
margin:0 auto;
text-align:center;
line-height:28px;
z-index:10px;
}
.nav li {
float:left;
margin-left:4px;
}
.nav li a {
width:78px;
min-height:28px;
display:block;
border:1px solid #333;
cursor:pointer;
}
.nav li a:hover {
}
.nav li:hover ul {
display:block;
}
.nav li ul {
width:78px;
min-height:28px;
display:none;
}
.nav li ul li {
margin:0;
}
.nav li ul li a {
width:78px;
min-height:28px;
display:block;
}
.nav li:hover ul li ul {
display:none;
}
.nav li ul li:hover ul {
display:block;
}
.nav li ul li ul {
width:78px;
min-height:28px;
margin:-30px 0 0 80px;
float:left;
position:absolute;
display:none;
}
.nav li ul li ul li {
margin:0;
}
.nav li ul li ul li a {
width:78px;
min-height:28px;
display:block;
}
</style>
</head>
<script>
window.onload=function()
{
oLi=document.getElementById("change");
oCh=oLi.getElementsByTagName("li");
for(var i=0;i<oCh.length;i++)
{
if(i%2==0){
oCh[i].style.background=‘red‘;
}
}
}
</script>
<body>
<ul class="nav">
<li><a>图片</a>
<ul>
<li><a>动物世界</a>
<ul id="change">
<li><a>狗</a></li>
<li><a>猫</a></li>
<li><a>狼</a></li>
</ul>
</li>
<li><a>人与社会</a>
<ul>
<li><a>金融风暴</a></li>
<li><a>伦理道德</a></li>
<li><a>昨天与未来</a></li>
</ul>
</li>
<li><a>进化史</a>
<ul>
<li><a>猿人</a></li>
<li><a>人猿</a></li>
<li><a>智人</a></li>
</ul>
</li>
</ul>
</li>
<li><a>运动</a>
<ul>
<li><a>球类</a>
<ul>
<li><a>篮球</a></li>
<li><a>足球</a></li>
<li><a>排球</a></li>
</ul>
</li>
<li><a>跑步</a>
<ul>
<li><a>长跑</a></li>
<li><a>慢跑</a></li>
<li><a>快跑</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
版权声明：博主原创文章，转载请说明出处。http://blog.csdn.net/dzy21