工作当中实际运用(1)——tab选项卡
不废话 直接上代码:
tab选项卡
window.onload=function(){
var titles= document.getElementById('header-dh').getElementsByTagName('li');//先获取到id header-dh 下面所有的li
var divs= document.getElementById('section-1').children; //在获取到id section-1 下面的子属性 .children是获取子元素的意思
for (var i = 0; i < titles.length; i++) {//通过for循环把所有的li都遍历出来
titles[i].id=i;//给遍历出来的li添加id
titles[i].onclick=function(){//给每一个li添加 onclick点击效果
for(j=0; j<titles.length;j++){//下面就是改变div的siplay 来控制隐藏或是显示
divs[j].style.display="none";
}
divs[this.id].style.display="block";
}
}
/*---------------------------------------------*/
}
工作当中实际运用(1)——tab选项卡的更多相关文章
- Axure实现Tab选项卡切换功能
这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
- 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 各种效果的tab选项卡
;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...
随机推荐
- 计算软键盘的高度然后确定自定义的View的具体位置
singleTouchView.getViewTreeObserver().addOnGlobalLayoutListener( new ViewTreeObserver.OnGlobalLayout ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- lightoj 1427 - Substring Frequency (II) AC自动机
模板题,找来测代码. 注意有相同单词 //#pragma comment(linker, "/STACK:1024000000,1024000000") #include<c ...
- Winform打砖块游戏制作step by step第5节---重构代码,利用继承多态
一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 本节内容---重构代码,利用继承多态 1. 主界面截图如下: 2. ...
- 阻塞非阻塞,同步异步四种I/O方式
举一个去书店买书的例子吧: (同步)阻塞: 你去书店买书,到柜台告诉店员,需要买一本APUE,然后一直在柜台等.(阻塞) 店员拿到书以后交给你. (同步)非阻塞: 你去书店买书,到柜台告诉店员A,需要 ...
- mysql Statement violates GTID consistency 的坑
今天项目迁移,重新换了一个数据库版本,然后问题来了,原本运行正常的程序迁移过来之后就是不能正常运行,后台报错如下: update tbl_user_info set -- 强制下架 mv_count ...
- Fuzzy Probability Theory---(3)Discrete Random Variables
We start with the fuzzy binomial. Then we discuss the fuzzy Poisson probability mass function. Fuzzy ...
- TCP/IP协议和HTTP协议 浩哥指教
TCP和IP在HTTP协议的上层,HTTP算是应用层,IP协议建立的是电脑跟电脑之间的联系,具体过程是,物理上,通过网线,解析MAC地址,到达路由,路由告诉数据将要去哪里,对方电脑通过NDS解析,解析 ...
- (Python)继承
面向对象的另一个特性是继承,继承可以更好的代码重用. 例如一个学校里面的成员有老师.学生.老师和学生都有共同的属性名字和年纪.但老师还有它自己的属性,如工资.学生也有它的属性,如成绩. 因此我们可以设 ...
- Base64正反编码
public class Base64 { private static char[] base64EncodeChars = new char[] { 'A', 'B', 'C', 'D', 'E' ...