有点乱，用到了自定义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. CronTrigger：Corn表达式

    定时触发 CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表.C ...

  2. iOS日常工作之常用宏定义大全

    前言: 在工作中, 很多小伙伴都会在PCH文件定义一些常用的宏,但是又怕写这些简单的宏浪费时间,又有时候忘记怎么定义了怎么办?本人在工作中也是如此.所以在这里给大家分享一些常用的宏定义,喜欢的小伙伴可 ...

  3. __declspec(dllexport) & __declspec(dllimport)

    __declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中 省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是 ...

  4. [HDOJ5933]ArcSoft's Office Rearrangement（贪心）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5933 题意:长度为nn的数组: a_1, a_2, \cdotsa​1​​,a​2​​,⋯, 每次操作 ...

  5. struts2--表单标签

    struts2的表单标签可分为两类:form标签本身和包装HTML表单元素的其他标签.form标签本身的行为不同于它内部的元素. struts2表单标签包括: form.textfield.passw ...

  6. 最大后验估计 -- Maximum-a-Posteriori (MAP) Estimation

    最大后验估计是根据经验数据获得对难以观察的量的点估计.与最大似然估计类似,但是最大的不同时,最大后验估计的融入了要估计量的先验分布在其中.故最大后验估计可以看做规则化的最大似然估计.

  7. Codeforces Round #380 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 2) D. Sea Battle 模拟

    D. Sea Battle time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. FLASH CC 2015 CANVAS 导出图片出现缩放问题

    最近有项目 没时间更新教程 刚才出现一个问题 就是导出动画后,发现有图片无故被缩放(与软件内的设置不一样) 经过排查 发现动画师 直接将位图 进行了缩放, 导出后出现问题 把文图转换为影片剪辑后,做缩 ...

  9. Xpert 基础

    ----------------------- 01 ------------------------------- declare cursor emp_cur is select empname ...

  10. js自定义弹窗

    <一>confirm弹窗 页面操作中常见需要确认操作. 例如:删除某条消息前需要确认是否删除. 页面中弹窗确认操作用到confirm消息对话框. JS代码 function del(){ ...