用JS索引值(this.index)实现的qq菜单实例!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
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 #600;color: #66FFFF;}
#list ul{ display: none;}
#list ul .hover{background: #66FFFF;}
#list ul li{line-height: 24px;border-bottom: 1px solid #333;text-indent: 24px;}
</style>
<script>
window.οnlοad=function()
{
var oUI=document.getElementById("list");
var aH2=oUI.getElementsByTagName("h2");
var aUI=oUI.getElementsByTagName("ul");
var aLi=null;
var arrLi=[];
for(var i=0;i<aH2.length;i++)
{
aH2[i].index=i;
aH2[i].οnclick=function()
{
if(this.className=="")
{
aUI[this.index].style.display='block';
this.className="active";
}else
{
aUI[this.index].style.display='none';
this.className="";
}
}
}
for(var i=0;i<aUI.length;i++)
{
aLi=aUI[i].getElementsByTagName("li");
for(var j=0;j<aLi.length;j++)
{
arrLi.push(aLi[j]);
}
}
for(var i=0;i<arrLi.length;i++)
{
arrLi[i].οnclick=function()
{
for(var i=0;i<arrLi.length;i++)
{
arrLi[i].className='';
}
this.className='hover';
}
}
}
</script>
</head>
<body>
<ul id="list">
<li class="lis">
<h2>我的好友</h2>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li class="lis">
<h2>陌生人</h2>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li class="lis">
<h2>黑名单</h2>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>
</body>
</html>