简单模拟QQ列表

包含：自定义属性使用，CSS样式优先级问题，for循环嵌套获取元素，全部清除后设置样式，记录上一个，只清除上一个然后设置样式

CSS部分：
ul,h2{margin: 0; padding: 0;}
li{
list-style: none;
}
#list{width:240px; border: 1px solid #333; margin: 0 auto;}
#list .lis{}
#list h2{background: url(img/js03/ico1.gif)no-repeat 5px center #6ff;
height: 30px;line-height: 30px; text-indent: 20px;}
#list .active{background: url(img/js03/ico2.gif)no-repeat 5px center #FF9;}
/必须指明#list，优先级不同，只写.active，上面的优先级高于后者，后者会被覆盖掉/
#list ul{display: none;}
#list ul li{line-height: 24px;border-bottom:1px solid #333333;text-indent: 24px;}
#list ul li:last-child{border-bottom: none;}
JS部分：
window.οnlοad=function(){
var oUl=document.getElementById(‘list’);
var aH2=oUl.getElementsByTagName(‘h2’);
var aUl=oUl.getElementsByTagName(‘ul’);
var oldUl=aUl[0];
var oldH2=aH2[0];
for(var i=0;i<aH2.length;i++){
aH2[i].index=i;
aH2[i].οnclick=function(){
oldUl.style.display=‘none’;
oldH2.className=’’;
if(this.className==’’){
oldH2=this;//记录点击地前一个，消除上一个的样式
oldUl=aUl[this.index];
aUl[this.index].style.display=‘block’;
this.className=‘active’;
}else{
aUl[this.index].style.display=‘none’;
this.className=’’;
}
}
}
var lis=document.getElementsByClassName(‘lis’);
var arrli=[];//暂存于数组以后方便使用
var aLi=null;
for(var i=0;i<lis.length;i++){
aLi=lis[i].getElementsByTagName(‘li’);
for(var j=0;j<aLi.length;j++){//变量i和j不相同
arrli.push(aLi[j]);
}
}
for(var l=0;l<arrli.length;l++){
arrli[l].οnclick=function(){
for(var l=0;l<arrli.length;l++){//函数中又一个循环时，变量可相同
arrli[l].style.background=“white”;
}
this.style.background=’#6FF’;
}
}

}
HTML部分：

  <ul id="list">
  <li class="lis">

                    <h2>我的好友</h2>

                    <ul>

                          <li>张三</li>

                          <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>

                    </ul>

              </li>

              

        </ul>