js—QQ菜单简单实例

来源：互联网发布：三菱plc编程入门梯形图编辑：程序博客网时间：2024/06/08 19:45

用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.onload=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].onclick=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].onclick=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>

阅读全文

0 0