最近学了点CS布局和JS,总是迫不及待的想写点小实例。
跟着妙味课堂学了一下模拟 QQ列表的简单功能展示,自己也敲了一遍代码。
页面布局如下:
<ul id="list">
<li class='lis'>
<ul>
<h2>家人</h2>
<li>爸爸</li>
<li>老妈</li>
<li>弟弟</li>
<li>哥</li>
<li>表姐</li>
</ul>
</li>
<li class='lis'>
<h2>闺蜜</h2>
<ul>
<li>大黄</li>
<li>桃子</li>
<li>阿丹</li>
<li>小敏</li>
<li>老王</li>
</ul>
</li>
<li class='lis'>
<h2>损友</h2>
<ul>
<li>霜哥</li>
<li>大翔</li>
<li>二狗</li>
<li>阿娇</li>
<li>熊猫</li>
</ul>
</li>
<li class='lis'>
<h2>吃货</h2>
<ul>
<li>娜姐</li>
<li>小慧</li>
<li>室长大人</li>
<li>荣荣</li>
<li>芬芬</li>
</ul>
</li>
</ul>
CSS布局:
<style>
ul,h2 { padding:0; margin:0; }
li { list-style:none; }
#list { width:240px; border:1px solid #333; margin:0 auto; }
#list .lis {}
#list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }
#list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
#list ul { display:none; }
#list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }
#list ul .hover{ background:orange; }
</style>
JS代码如下:
var oUl = document.getElementById('list');
var aH2 = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
for(i=0;i<aH2.length;i++){
aH2[i].index=i;
aH2[i].οnclick=function(){
if(this.className==''){
aUl[this.index].style.display='block';
this.className='active';
}
else{
aUl[this.index].style.display='none';
this.className='';
}
}
}