有点乱，用到了自定义getByClass函数、sibling函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿QQ</title> </head> <style type="text/css"> body,ul,li,div,p{margin: 0;padding: 0;} .qq_bg{ width: 200px; background: #c66; border:1px solid #66c; position: fixed; right: 20px; top: 20px; } ul,li{list-style: none;} .cf:before,.cf:after,.cf>li:before,.cf>li:after{ content: ''; display: block; } .cf:after,.cf>li:after{ clear: both; } .tab_nav>li{ float: left; width: 48px; border-left: 2px solid #fff; height: 34px; line-height: 34px; text-align: center; color: #fff; font-size: 12px; border-bottom: 2px solid #fff; } .tab_nav>li.on{border-bottom: none;height: 36px;} .tab_nav>li:first-child{border-left: none;} .txt div{ color: #fff; background: pink; text-align: center; padding: 100px 0; } </style> <body> <div class="qq_bg"> <ul class="tab_nav cf"> <li class="on">会话</li> <li>联系人</li> <li>空间</li> <li>微博</li> </ul> <div class="txt"> <div> <p>泉眼无声惜细流，</p> <p>树阴照水爱晴柔。</p> <p>小荷才露尖尖角，</p> <p>早有蜻蜓立上头。</p> </div> <div> <p>红豆生南国，</p> <p>春来发几枝。</p> <p>愿君多采撷，</p> <p>此物最相思。</p> </div> <div> <p>少读诗书陋汉唐，莫年身世寄农桑。</p> <p>骑驴两脚欲到地，爱酒一樽常在旁。</p> <p>老去形容虽变改，醉来意气尚轩昂。</p> <p>太行王屋何由动，堪笑愚公不自量。</p> </div> <div> <p>万里桥西一草堂，百花潭水即沧浪。</p> <p>风含翠篠娟娟净，雨裛红蕖冉冉香。</p> <p>厚禄故人书断绝，恒饥稚子色凄凉。</p> <p>欲填沟壑唯疏放，自笑狂夫老更狂。</p> </div> </div> </div> <script type="text/javascript"> var oWin=getByClass(document,'qq_bg')[0]; var oUl=getByClass(oWin,'tab_nav')[0]; var oDiv=getByClass(oWin,'txt')[0]; var aLi=oUl.getElementsByTagName('li'); var aDiv=oDiv.getElementsByTagName('div'); //console.log(aLi.length); //console.log(aDiv.length); for(var i=0;i<aDiv.length;i++){ aDiv[i].style.display='none'; } aDiv[0].style.display="block"; for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ this.className='on'; var aa=sibling(this); for(var i=0;i<aa.length;i++){ aa[i].className=' '; } var index=this.index; for(var j=0;j<aDiv.length;j++){ aDiv[j].style.display="none"; aDiv[index].style.display='block'; } } } function sibling( elem ) { var r = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem ) { r.push( n ); } } return r; } function getByClass(oParent,cls){ //console.log(oParent); var aEle=oParent.getElementsByTagName('*'); var aResult=[]; for(var i=0;i<aEle.length;i++){ var aCls=aEle[i].className; aCls=aCls.split(' '); if(aCls.indexOf(cls)!=-1){ aResult.push(aEle[i]); } } return aResult; } </script> </body> </html>