一、
<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="utf-8" >
window.onload=function(){
var div=document.getElementById(‘div1‘);
var h2s=div.getElementsByTagName(‘h2‘);
var ul=document.getElementById(‘lis‘);
//alert(h2s.length);
var uls=ul.getElementsByTagName(‘ul‘);
//alert(uls.length);
var arr=[];
var lis=null;
for (var i = 0; i < h2s.length; i++) {
h2s[i].index = i;
h2s.off = true;
h2s[i].onclick = function(){
for (var i = 0; i < h2s.length; i++) {
if (i !=this.index) {
h2s[i].className = "";
h2s[i].off = true;
uls[i].style.display = "";
}
if (this.off) {
this.className = "active";
uls[this.index].style.display = "block";
}
else {
this.className = "active";
uls[this.index].style.display = "block";
}
}
}
}
for(var j=0;j<uls.length;j++){
lis=uls[j].getElementsByTagName(‘li‘);
for(var i=0;i<lis.length;i++){
arr.push(lis[i]);
}
}
for(var i=0;i<arr.length;i++){arr[i].onclick=function(){
for(var j=0;j<arr.length;j++){
arr[j].style.background=‘‘;
}
this.style.background="#fd7";
}
}
}
</script>
<style>
ul ,li,h2{margin:0;padding:0;}
#div1{width:252px;margin:0 auto}
#div1 ul, #div1 .lie ul{list-style-type:none;}
h2{background:#63f7ff url(../img/ico1.gif) no-repeat 5px 13px;height:32px;width:252px;line-height:32px;font-size:25px;text-indent:24px;}
#div1 .lie ul {width:252px;text-indent:24px;display:none;}
#div1 .lie ul li{margin:2px 0;}
.active{background:yellow url(../img/ico2.gif) no-repeat 5px 13px;text-indent:24px;}
.act{background:yellow;}
.at{background:blue;}
</style>
</head>
<body>
<div id="div1">
<ul id="lis">
<li class="lie">
<h2>我的好友</h2>
<ul>
<li>SDR</li>
<li>发给他</li>
<li>常德市</li>
</ul>
</li>
<li class="lie">
<h2>企业好友</h2>
<ul>
<li>电饭锅</li>
<li>打个包</li>
<li>松岛枫</li>
</ul>
</li>
<li class="lie">
<h2>黑名单</h2>
<ul>
<li>战三</li>
<li>多多</li>
<li>裤腰</li>
</ul>
</li>
</ul>
</div>
</body>
</html>本文出自 “春天里！” 博客，谢绝转载！
原文地址：http://11180930.blog.51cto.com/11170930/1834341
