列表分组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QQ分组</title>
<style type="text/css">
*{margin:0;padding:0;list-style: none;}
#box{width: 250px;margin:50px auto 0px;border:1px solid #666;text-indent:20px;}
#box h2{ color:#fff;font:bold 18px/40px "黑体";background:url(btn.png) 5px 15px no-repeat #999;height: 40px;}
#box .active{background:url(btn.png) 5px -15px no-repeat #666;}
#box ul li{font:normal 14px/35px "黑体";border-bottom:1px dashed #999;text-indent:40px;}
#box ul li.click{background:#ccc;}
#box ul{display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById("box");
var aH2=oBox.getElementsByTagName("h2");
var aUl=oBox.getElementsByTagName("ul");
var aLi=null;
var arrLi=[];
for( var i=0; i<aH2.length; i++){
aH2[i].index=i;
aH2[i].onclick=function(){
if(this.className==""){
aUl[this.index].style.display="block";
this.className="active";
}else{
aUl[this.index].style.display="none";
this.className="";
};
};
};
for(var i=0;i<aUl.length;i++){
aLi=aUl[i].getElementsByTagName("li");
for(j=0;j<aLi.length;j++){
arrLi.push(aLi[j]);
}
}
for(var i=0;i<arrLi.length;i++){
arrLi[i].onclick=function(){
for(var i=0;i<arrLi.length;i++){
arrLi[i].className="";
};
this.className="click";
};
};
};
</script>
</head>
<body>
<ul id="box">
<li>
<h2>我的情人</h2>
<ul>
<li>王六蛋</li>
<li>王六蛋</li>
<li>王六蛋</li>
<li>王六蛋</li>
<li>王六蛋</li>
</ul>
</li>
<li>
<h2>我的二奶</h2>
<ul>
<li>王七蛋</li>
<li>王七蛋</li>
<li>王七蛋</li>
<li>王七蛋</li>
<li>王七蛋</li>
</ul>
</li>
<li>
<h2>我的红颜</h2>
<ul>
<li>王八蛋</li>
<li>王八蛋</li>
<li>王八蛋</li>
<li>王八蛋</li>
<li>王八蛋</li>
</ul>
</li>
<li>
<h2>我的女友</h2>
<ul>
<li>王九蛋</li>
<li>王九蛋</li>
<li>王九蛋</li>
<li>王九蛋</li>
<li>王九蛋</li>
</ul>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号