Case one:
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<script type= "Text/javascript" >
function test (obj) {
MySpan
if (obj.innertext== "+") {
Show members
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 classification
<ul id= "Myul" style= "Display:none" >
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
</body>
Case TWO:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </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>
<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> Pictures </a>
<ul>
<li><a> Animal World </a>
<ul id= "Change" >
<li><a> Dogs </a></li>
<li><a> Cat </a></li>
<li><a> Wolves </a></li>
</ul>
</li>
<li><a> People and Society </a>
<ul>
<li><a> Financial Turmoil </a></li>
<li><a> Ethics </a></li>
<li><a> yesterday and the future </a></li>
</ul>
</li>
<li><a> Evolutionary History </a>
<ul>
<li><a> Ape </a></li>
<li><a> Apes </a></li>
<li><a> Homo sapiens </a></li>
</ul>
</li>
</ul>
</li>
<li><a> Sports </a>
<ul>
<li><a> Ball </a>
<ul>
<li><a> Basketball </a></li>
<li><a> Football </a></li>
<li><a> Volleyball </a></li>
</ul>
</li>
<li><a> Running </a>
<ul>
<li><a> long-distance running </a></li>
<li><a> Jogging </a></li>
<li><a> Run </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Copyright Notice: Bo Master original articles, reproduced please indicate the source. Http://blog.csdn.net/dzy21
JavaScript DOM Programming (5): Common Object 4