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. Linux如何进行文件管理

    Linux中的所有数据都被保存在文件中,所有的文件被分配到不同的目录.目录是一种类似于树的结构,称为文件系统.当你使用Linux时,大部分时间都会和文件打交道,通过本节可以了解基本的文件操作,如创建文 ...

  2. QQ远程桌面的使用

    腾讯QQ怎样使用远程桌面: ---------------------- ----------------------

  3. 使用django开发博客过程记录5——日期归档和视图重写

    针对每条博客的观看次数我么是使用django的Mixin实现的: def get(self, request, *args, **kwargs): last_visit = request.sessi ...

  4. 嵌入式 Linux下永久生效环境变量bashrc

    嵌入式 Linux下永久生效环境变量bashrc 1) .bashrc文件 在linux系统普通用户目录(cd /home/xxx)或root用户目录(cd /root)下,用指令ls -al可以看到 ...

  5. MySQL点滴

    1. 只安装Server和Workbench即可: 2. 安装时安装Windows服务,可以在“管理 > 服务”中开启关闭服务: 3. mysql -uroot -p1234 4. PHP Fa ...

  6. deiban8 sourcelist

    deb http://ftp2.cn.debian.org/debian/ jessie main non-free contribdeb http://ftp2.cn.debian.org/debi ...

  7. Apache Shiro 学习记录5

    本来这篇文章是想写从Factory加载ini配置到生成securityManager的过程的....但是貌似涉及的东西有点多...我学的又比较慢...很多类都来不及研究,我又怕等我后面的研究了前面的都 ...

  8. velocity中$springMacroRequestContext.getMessage($code)

    在Java国际化(i18n)中, vm页面显示内容需要使用 #springMessage("title") 实际运行时发现页面输出$springMacroRequestContex ...

  9. EBS 中经常用到的一些值集

    名称                                 值集                                                                ...

  10. gulp工具rename

    gulp 对文件批量重命名 gulp-rename重命名 var gulp = require('gulp'); var rename = require("gulp-rename" ...