js TAb

有点乱，用到了自定义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的更多相关文章

js Tab切换实例
js 实现 tab 切换实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
JS——tab函数封装
1.为li标签添加index属性,这个属性正好就是span标签数组的index值 2.函数封装适合页面有多个tab切换,需要注意的在获取的li标签和span标签对象时,必须将对应div对象作为参数传入 ...
js tab栏切换
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
原生js tab 栏切换
<div id="box"> <div> <button>按钮1</button> <button>按钮2</bu ...
JS tab切换事件
$('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-c ...
JS——tab切换
排它思想: 1.先让所有的元素恢复默认值 2.再让选中的元素赋专有的值 3.干掉所有人,剩下我一个 <!DOCTYPE html> <html> <head lang=& ...
avalon结合原生js tab切换
<div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!='' ...
JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

随机推荐

#查找列表中元素，移除每个元素的空格，并查找以 a或A开头并且以 c 结尾的所有元素
#!/usr/bin/env python #查找列表中元素,移除每个元素的空格,并查找以 a或A开头并且以 c 结尾的所有元素. # li = ["alec", &quo ...
C#实现ActiveX控件开发与部署
现在,我们手里已经有了这个控件包:QRCode.cab,下面我们编写一个测试的网页 <html> <head> <title>无标题页</title> ...
首先，定义一个Print类，它有一个方法void output(int x)，如果x的值是1，在控制台打印出大写的英文字母表；如果x的值是2，在控制台打印出小写的英文字母表。其次，再定义一个主类——TestClass，在主类的main方法中创建Print类的对象，使用这个对象调用方法output ()来打印出大小写英文字母表。
package lianxi; public class Print_1 { int x; Print_1(int x) { this.x = x; } void outPut() { String ...
Cheatsheet: 2014 07.01 ~ 07.31
Web Maximize Compression with Zopfli Browser Detection with JavaScript Simple MySQL Master HA with m ...
MySql性能优化相关
原来使用MySql处理的数据量比较少,小打小闹的,没有关注过性能的问题.最近要处理的数据量飙升,每天至少20W行的新增数据,导致MySql在性能方面已经是差到不可用的地步了,必须要重视MySql的优化 ...
C#无需IIS构建XmlRpc服务器
准备我们使用CookComputing.XmlRpcServerV2 3.0.0来构建XmlRpc服务器. 新建一个控制台项目,在项目中添加对CookComputing.XmlRpcServerV2 ...
图片格式转换之ImageMagick
项目中需要实现一些图片文件到TIFF文件的转换,去网上下载了一些第三方软件. 好的软件需要收费,免费的存在各种问题. 自己动手,丰衣足食! 众里寻他千百度,蓦然回首,那人就是ImageMagick. ...
Spring AOP和AspectJ支持
学了Spring之后发现我都不知道java为何物-- 在这一章中有好几节,讲的切面编程第一节:在项目中启用Spring的AspectJ注解支持第二节:用AspectJ注解声明aspect 第三节: ...
kaili 2.0 虚拟机修改ip
第一步:将虚拟机设置为桥接状态,并勾选上复制物理网络连接状态
[SAP ABAP开发技术总结]将文件存储到数据库表中，并可发送邮件
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

js TAb

js TAb的更多相关文章

随机推荐

热门专题