效果图如下所示：
代码如下：
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>无标题文档</title> | |
| <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:#6FF; } | |
| </style> | |
| <script> | |
| window.onload = function (){ | |
| var oUl = document.getElementById('list'); | |
| var aH2 = oUl.getElementsByTagName('h2'); | |
| var aUl = oUl.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==''){ | |
| for(var j=0;j<aH2.length;j++){ | |
| aH2[j].className=''; | |
| aUl[j].style.display='none'; | |
| } | |
| this.className='active'; | |
| aUl[this.index].style.display="block"; | |
| }else{ | |
| this.className=''; | |
| aUl[this.index].style.display="none"; | |
| } | |
| for (var j = 0; j < aH2.length; j++) { | |
| aH2[j].className=''; | |
| this.className='active'; | |
| } | |
| } | |
| } | |
| for(var i=0;i<aUl.length;i++){ | |
| aLi=aUl[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 j=0;j<arrLi.length;j++){ | |
| arrLi[j].className=''; | |
| }this.className='hover'; | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <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> | |
| <li>李四</li> | |
| <li>李四</li> | |
| </ul> | |
| </li> | |
| <li class="lis"> | |
| <h2>黑名单</h2> | |
| <ul> | |
| <li>张小三</li> | |
| <li>李小四</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |