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. sql server中对xml进行操作

    一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和参数.为了更好地支持 XM ...

  2. xpath 学习一: 节点

    xpath 中,有七种类型的节点: 元素.属性.文本.命名空间.处理指令.注释.以及根节点 树的根成为文档节点或者根节点. 节点关系: Parent, Children, sibling(同胞), A ...

  3. New Plan!

    很久无写过blogs,荒废得差不多了,在博客园虽开bolg 5年多,但由于自己工作的问题,从开始的热情记录,到冷却冰冻,再到现在重拾起来,有一番感受:从大学刚毕业的制作网页菜鸟,开始接触DIV,CSS ...

  4. Bubble Cup 8 finals D. Tablecity (575D)

    题意: (无输入,纯输出题) 一个城市用1000列2行的格子表示,一个小偷藏在城市的某一处. 在每一小时的开始, 在(X, Y)位置的小偷可以移动到 (X - 1, Y), (X + 1, Y),(X ...

  5. Backbone事件模块及其用法

    事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...

  6. 防御CSRF的方法有哪些(一) HTTP 头中自定义属性并验证 CSRF跨站域请求伪造攻击

    CSRF (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下 ...

  7. json-c与树

    json是一种轻量级的数据交换格式,因为其灵巧使得其在应用层开发以及接口层开发使用的十分广泛,最常用的莫过于协议交流使用json数据,比xml轻巧,又比二进制数据有规则.无论是各大公司的开放平台或者是 ...

  8. 使用SqlDataReader和SqlDataAdapter的注意

    1.当SqlDataReader没有关闭之前,数据库连接会一直保持open状态,所以在使用SqlDataReader时,使用完毕应该马上调用SqlDataReader.Close()关闭它. 2.一个 ...

  9. Visual Studio 版本转换工具WPF版开源了

    想法的由来 入职一家新公司,领导给了个任务,要编写一个视频监控软件,等我编写调试好,领导满意了以后,这个软件要加入到公司的一个软件系统中去(这个添加工作不用我来做,嘻嘻,看着自己的软件被别人使用,心情 ...

  10. [转载]深入理解HTTP Session

    深入理解HTTP Session   session在web开发中是一个非常重要的概念,这个概念很抽象,很难定义,也是最让人迷惑的一个名词,也是最多被滥用的名字之一,在不同的场合,session一次的 ...