var Rea = document.getElementById("rep");
var ReaAll = Rea.querySelectorAll("li");
var Fall = document.getElementById("fall");
var FallAll = Fall.querySelectorAll("ul"); for(var i=0;i<ReaAll.length;i++){
ReaAll[i].index=i;
ReaAll[i].onclick=function(){
for(var i=0;i<ReaAll.length;i++){
ReaAll[i].className=" ";
FallAll[i].style.display="none";
}
this.className="avtion";
FallAll[this.index].style.display="block";
}
}
                                   <ul class="row rep_ad" id="rep">
<li class="avtion">公告</li>
<li>知识库</li>
</ul>
<div id="fall">
<ul style="display:block;">
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
<li>11111111111111111</li>
</ul>
<ul>
<li>22222222222222222</li>
<li>22222222222222222</li>
<li>22222222222222222</li>
<li>22222222222222222</li>
<li>22222222222222222</li>
</ul>
</div>
</div>

一看就懂。走起!

js原声快速实现选项卡的更多相关文章

  1. js原声代码 轮播图

    js轮播图 html部分:建立div,内嵌img标签,可以设置大小, <!doctype html> <html> <head> <meta charset= ...

  2. node.js 安装方法 以及 用原声搭建服务器

    node.js 安装方法: 第一步: 64位的安装包网址:   https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 第二步: 进入命令提示框  输入 ...

  3. 基于js-spark-md5前端js类库,快速获取文件Md5值

    js-spark-md5是歪果仁开发的东西,有点多,但是我们只要一个js文件即可,具体类包我存在自己的oschina上,下载地址:https://git.oschina.net/jianqingwan ...

  4. 比较原声socket 、GCDAsyncSocket

    原声socket NSInputStream 输入流(OC)NSOutputStream 输出流(OC)1:通过c语言的输入输出流CFReadStreamRef/CFWirteStreamRef(输入 ...

  5. 基于 Node.js 平台,快速、开放、极简的 web 开发框架。

    资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...

  6. js面向对象+一般方法的选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 关于ios原声嵌入web页面的问题

    当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...

  8. 大D实例化model-->调用自定义类方法,大M调用原声model方法

    class ContactsModel extends Model{ public function addxxx(){ } } $conmodel = D('contacts','Model'); ...

  9. 移动WEB模拟原声APP滑动删除

    移动WEB模拟原声APP滑动删除 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. 2.7我们的第一个Java程序

    最后,让我们正式编一个程序(注释⑤).它能打印出与当前运行的系统有关的资料,并利用了来自Java标准库的System对象的多种方法.注意这里引入了一种额外的注释样式:“//”.它表示到本行结束前的所有 ...

  2. UICollectionViewCell 网格显示数据

    using System; using System.Collections.Generic; using Foundation; using UIKit; namespace ddd { publi ...

  3. json基础

    1 xml缺点 用xml表示一个对象,数据存储效率低 <person> <firstName>Morra<firstName> <lastName>Do ...

  4. Caffe学习

    将binaryproto转为npy import caffe % suppose caffe is already in the path of Python import numpy as np i ...

  5. input file限制上传文件类型

    http://www.cnblogs.com/haocool/p/3431181.html http://www.haorooms.com/post/input_file_leixing http:/ ...

  6. 20145212——GDB调试汇编堆栈过程分析

    GDB调试汇编堆栈过程分析 测试代码 #include <stdio.h> short val = 1; int vv = 2; int g(int xxx) { return xxx + ...

  7. List接口方法使用(PS:Java 编程思想阅读小结)

    1.用代码说话 package JavaProject; import java.util.*; public class A{ public static void main(String[]arg ...

  8. Python题目

    https://github.com/taizilongxu/interview_python 1 Python的函数参数传递 strings, tuples, 和numbers是不可更改的对象,而l ...

  9. Java 泛型 <? super T> 中 super 怎么 理解?与 extends 有何不同?

    看知乎:https://www.zhihu.com/question/20400700 了解的越多,就会发现,越多不了解.

  10. tomcat用root权限也起不来

    昨晚把服务器弄的启动不了了,先来还原一下作案现场, 错误操作过程:替换classes目录下的某个目录,比如com,由于替换了classes文件,所以需要重启tomcat,在bin目录下执行sh sta ...