js TAb

浏览数：34 / 时间：2015年06月09日

有点乱，用到了自定义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>