QQ列表展示
Posted @我爱吃西瓜~~~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了QQ列表展示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
ul,h2{margin: 0; padding: 0;}
li{list-style-type: none;}
#list{width: 240px; border: 1px solid black; margin: 0 auto;}
#list h2{text-indent: 16px;background: url(img/ico1.gif) no-repeat 5px center dodgerblue;}
#list ul li{text-indent: 24px;border: 1px solid black;}
#list ul {display: none;}
#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
#list ul .hover { background:#6FF; }
</style>
<script type="text/javascript">
window.onload=function(){
var oUl = document.getElementById(\'list\');
var aH2 = oUl.getElementsByTagName(\'h2\');
var aUl = oUl.getElementsByTagName(\'ul\');
var arr=[];
var num=null;
for(var i=0;i<aH2.length;++i){
aH2[i].index=i;
aH2[i].onclick=function(){
for(var i=0;i<aH2.length;++i){
aH2[i].className=\'\';
aUl[i].style.display=\'\';
}
if(this.className==\'\'){
this.className=\'active\';
aUl[this.index].style.display=\'block\';
}else{
this.className=\'\';
aUl[this.index].style.display=\'none\';
}
};
};
for(var j=0;j<aUl.length;++j){
var aLi = aUl[j].getElementsByTagName(\'li\');
for(var i=0;i<aLi.length;++i){
arr.push(aLi[i]);
}
};
for(var i=0;i<arr.length;++i){
arr[i].onclick=function(){
for(var i=0;i<arr.length;++i){
arr[i].className=\'\';
}
this.className=\'hover\';
}
}
};
</script>
<body>
<ul id="list">
<li class="lis">
<h2>我的好友</h2>
<ul>
<li>张一</li>
<li>张二</li>
<li>张三</li>
</ul>
</li>
<li class="lis">
<h2>企业好友</h2>
<ul>
<li>李一</li>
<li>李二</li>
<li>李三</li>
</ul>
</li>
<li class="lis">
<h2>黑名单</h2>
<ul>
<li>王一</li>
<li>王二</li>
<li>王三</li>
</ul>
</li>
</ul>
</body>
</html>
以上是关于QQ列表展示的主要内容，如果未能解决你的问题，请参考以下文章