工作当中实际运用(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 ...
随机推荐
- TCP的拥塞控制
1.引言 计算机网络中的带宽.交换结点中的缓存和处理机等,都是网络的资源.在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就会变坏.这种情况就叫做拥塞. 拥塞控制就是防止 ...
- zabbix nagios 类nagios 之 不以性能为前提的开发和监控都是瞎扯淡
从最初的nagios到现在强大的zabbix 3.0,我想说,不以性能为前提的开发和监控都是瞎扯淡? 首先我对这两款监控软件的认识: zabbix,很多企业都在用,给人的感觉是很炫,不过我个人觉得虽然 ...
- 延迟对象$q和供应商配置config
1.angular总的$q和jquery中的延迟对象很类似,用法也差不多 m1.controller('meng',['$scope','$q',function($scope,$q){ var df ...
- Linux(Ubuntu 14.0)
开始了Mono的学习.学习了Mono for Android之后,编译一些小的APK,总发现这些APK文件很大,额,真心不知道为什么,那么,就让我们从头开始学期了,Android是基于Linux的,那 ...
- 解决Nginx不支持pathinfo的问题
server { listen 80; server_name www.zq27.cc zq27.cc; root /data/wwwroot/www.zq27.cc/; access_log off ...
- 不支持C++11 decltype的噩耗
前言:因为公司现在使用vs2008,所以很多c++11的新特性还未能使用,导致写了很多冤枉代码. 最初引擎的数学库非常简单,使用起来也不方便,例如: float FastLerp(const floa ...
- 【Mail】JavaMail发送带附件的邮件(二)
上一篇讲了使用JavaMail发送普通邮件([Mail]JavaMail介绍及发送邮件(一)),本例讲发送复杂的邮件(带有附件的邮件) 生成一封复杂的邮件 新建一个JavaWeb的Maven工程,引入 ...
- How to: Change Sales Rep/Team via Mass Update
/* from: https://netsuite.custhelp.com/app/answers/detail/a_id/30057/kw/reassign%20sales */ How to c ...
- 封装ios静态库碰到的一些问题(一)
封装IOS动态库,碰到的第一个问题,就是资源文件的问题,如果将你的程序封装成为静态库,那么静态库中不会包含资源文件和xib文件,这个时候就需要自己封装bundle文件了,而笔者开发环境默认是xcode ...
- C#装箱和拆箱
1.装箱是将值类型转换为引用类型(或者转换为此值类型所实现的任何接口类型)的隐式转换,当 CLR 对值类型进行装箱时,会将该值包装到 System.Object 内部,再将后者存储在托管堆上. ; / ...