有点乱，用到了自定义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. GCD之dispatch queue深入浅出

    GCD之dispatch queue深入浅出 http://blog.csdn.net/samuelltk/article/details/9452203

  2. BZOJ 3601: 一个人的数论

    题目链接:www.lydsy.com/JudgeOnline/problem.php?id=3601 题意: 思路: 因此可以用高斯消元得到ai. const int mod=1000000007; ...

  3. 04-23 Android 课堂笔记

    1.调用 //暂停 @Override protected void onPause() { super.onPause(); Log.e("TAG", "onPause ...

  4. MyBatis Mapper 接口如何通过JDK动态代理来包装SqlSession 源码分析

    我们以往使用ibatis或者mybatis 都是以这种方式调用XML当中定义的CRUD标签来执行SQL 比如这样 <?xml version="1.0" encoding=& ...

  5. 青岛理工大学第五届ACM交流赛 部分题解

    A:后缀维护si*pi的最小值,查询的时候二分,判断后缀和当前两个部分就行. #include <bits/stdc++.h> using namespace std; typedef l ...

  6. 购买vps创建账号后无法登录ftp

    购买了vps,并在后台已经开通了ftp账号,但是前台无法登录.错误提示530.解决方法是: 请检查您ftp账号密码是否输入正确,若确认正确,请您ssh登陆服务器,然后执行sh /www/wdlinux ...

  7. CUBRID学习笔记 8 复制数据库

    1  export  database  类似sqlserver的分离数据库 cubrid unloaddb demodb分离后生成三个文件 demodb_objects, demodb_indexe ...

  8. git 简单用

    之前一直用svn,用git也只是从github上clone代码.现在自己试试用git做版本控制.等用熟悉了,再看看怎么搞分支,合并,多人开发之类的. 1下载个git客户端,如Git for Windo ...

  9. onclick事件分析

     有些时候,我们想实现这样的一种效果:      <a href="imgs/2.jpg" title="A fireworks display" onc ...

  10. return、 return false的用法

    1. return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交2. return false,事件处理函数会取消事件,不再继续向下执行.比如 ...