包含:自定义属性使用,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>