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

js TAb的更多相关文章

  1. js Tab切换实例

    js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...

  2. JS——tab函数封装

    1.为li标签添加index属性,这个属性正好就是span标签数组的index值 2.函数封装适合页面有多个tab切换,需要注意的在获取的li标签和span标签对象时,必须将对应div对象作为参数传入 ...

  3. js tab栏切换

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. 原生js tab 栏切换

    <div id="box"> <div> <button>按钮1</button> <button>按钮2</bu ...

  5. JS tab切换事件

    $('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-c ...

  6. JS——tab切换

    排它思想: 1.先让所有的元素恢复默认值 2.再让选中的元素赋专有的值 3.干掉所有人,剩下我一个 <!DOCTYPE html> <html> <head lang=& ...

  7. avalon结合原生js tab切换

    <div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!='' ...

  8. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  9. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

随机推荐

  1. Codeforces 633B A Trivial Problem

    B. A Trivial Problem time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  2. 窗口移动--基类(BaseForm)

    #region 窗口移动 private bool _isLeftButtonDown = false; public const int HTCAPTION = 0x0002; protected ...

  3. Creating Object Library OLB in Oracle D2k Form

    With following steps you can create Object Library (OLB) in Oracle D2k Forms.Step - 1Create a form i ...

  4. hashcat

    作者: 官网:https://hashcat.net/oclhashcat/ 功能:hash破解

  5. XmlDocument To String

    一.从String xml到XmlDocument的: string xml = "<XML><Test>Hello World</Test></X ...

  6. sql server日期时间函数

    From:http://www.cnblogs.com/linzheng/archive/2010/11/17/1880208.html 1.  当前系统日期.时间  select getdate() ...

  7. jpg 批量压缩工具 v1.0

    工作需要经常压缩大量图片,网上搜了一些  使用起来总觉得不方便.昨天自己用AIR 写了一个,功能简单,需要的朋友可以自己 下载使用win 版绿色版  http://pan.baidu.com/s/1k ...

  8. Oracle VM VirtualBox 虚拟机与主机共享文件

    安装增强功能(参考文档) VirtualBox自带了一个增强工具Sun VirtualBox Guest Additions,这是实现虚拟机与真实主机共享的关键.启动虚拟机后,点击控制菜单“设备”→“ ...

  9. Scrum Meeting---Five(2015-10-29)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 Java Web工程创建,hibernate框架安装,关系映射文件生成 4h 用户注册登录 4h 胡 ...

  10. iOS - UITouch

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITouch : NSObject @available(iOS 2.0, *) public class UIT ...