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. CentOS 7 防火墙 firewall 的使用

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disabl ...

  2. strrchr 一个获取扩展名的方便的php函数

    上传文件时,$_FILES里面的name是稳健的名称,要获取扩展名就用 strrchr(str,符号)来截取最后一个.后面的扩展名 然后用 trim 去掉特殊字符. 就可以得到扩展名了

  3. UNIX下的LD_PRELOAD环境变量

    UNIX下的LD_PRELOAD环境变量 也许这个话题并不新鲜,因为LD_PRELOAD所产生的问题由来已久.不过,在这里,我还是想讨论一下这个环境变量.因为这个环境变量所带来的安全问题非常严重,值得 ...

  4. React 组件性能优化探索实践

    转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效. ...

  5. Linux 计划任务 访问网页

    1.linux安装 [root@CentOS ~]# yum -y install vixie-cron[root@CentOS ~]# yum -y install crontabs 说明:vixi ...

  6. Struts2返回json格式数据踩坑记录

    事件起因 昨天提测修改冻结/解冻银行卡样式的功能,微姐测试过程中发现调用ajax请求耗时过长,今天来排查,发现浏览器请求/finance/ajax/freeze/ajaxGetShopLists时,对 ...

  7. js设置鼠标悬停改变背景色

    看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...

  8. 1.0、修改MyEclipse字体大小及颜色

    windows-->prefereces->General-->Appearance-->Colors and Fonts,在右边找到要修改的字体或背景,双击点Edit修改即可 ...

  9. 补发:用Meal Prep+模块化饮食来减肥之实操

    自从上次读到仰望尾迹云 老师的模块化饮食的帖子,再了解了一些Meal Prep的内容,结合着做Meal Prep健康餐至今已经快一个半月了.整体感觉还可以,所以在这里讲一下自己的心得体会. 分为三个部 ...

  10. Android Studio开发Android应用如何签名

    1.使用jdk自带的工具生成keystore 使用cmd命令行进入到jdk的bin目录(比如:C:\Program Files\Java\jdk1.7.0_01\bin) 运行如下命令: C:\Pro ...