有点乱，用到了自定义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. windows8运行php Composer出现SSL报错的问题

    这是没有安装CA证书导致的!!! CA证书下载地址:http://curl.haxx.se/docs/caextract.html 然后修改php.ini文件 openssl.cafile= D:/w ...

  2. C++实现有向权图的基本操作，界面友好，操作方便，运行流畅

    Ⅰ.功能: .创建图 .展示全图 .添加顶点 .添加边 .删除顶点 .删除边 .查看指定边权值 .修改指定边权值 .输出两点间的所有简单路及路径对应权值 .销毁图 ps:关于9,如果不存在任何简单路, ...

  3. 昂贵的聘礼 Dijkstra法

    poj 1062 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39437   Accepted: 11432 Descri ...

  4. netstat -ano，查看已占用端口,结束已被占用的端口,ntsd,关闭任务管理器杀不了的进程

    cmd——回车,输入netstat -ano——回车,可以查看已占用的端口,记下端口的PID,然后打开任务管理器,点查看,选择列,勾选PID确定,找到对应的PID,结束进程,如果结束不了或者结束后还不 ...

  5. @RequestMapping测试各种访问方式

    这里访问WEB-INF目录下的页面,这个还不知道有没有类似struts2那样的通配符来可以访问不同的action,不同的method,不同 的页面,用户则很爽,有的话求告知,而且我还有一个问题就是配置 ...

  6. [HIHO119]网络流五·最大权闭合子图（最大流）

    题目链接:http://hihocoder.com/contest/hiho119/problem/1 题意:中文题意. 由于1≤N≤200,1≤M≤200.最极端情况就是中间所有边都是满的,一共有N ...

  7. 【转】Kali Linux 新手折腾笔记

    原作者:http://defcon.cn/1618.html 最近在折腾Kali Linux 顺便做一简单整理,至于安装就不再多扯了,估计会出现的问题上一篇文章<VMware虚拟机安装Kali ...

  8. Tomcat配置虚拟目录

    在Tomcat7版本下,配置虚拟路径修改以下两个文件:     1.server.xml     打开Tomcat目录下的/conf/server.xml文件,在Host之前加入下面红色部分的内容. ...

  9. MVC3远程验证

    public class StudentModel { [Display(Name="学生编号")] public int StuId { set; get; } [Require ...

  10. c++ vector 简单实现。

    第二次修改: 1)熟悉基本的模板编程,头文件和定义必须放到一起. 2)熟悉内存管理模板类 allocator<T>. 1.使用标准库的内存管理类 allocator<T> 代替 ...