不废话 直接上代码:

        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选项卡的更多相关文章

  1. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  2. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  3. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  4. 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  5. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  6. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  7. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  8. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  9. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

随机推荐

  1. 使用HttpClient 4.3.4 自动登录并抓取中国联通用户基本信息和账单数据,GET/POST/Cookie

    一.什么是HttpClient? HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 ...

  2. myeclipse10的激活

    myeclipse 提醒了我好几天要激活,今天操作了下,出现的问题分享一下. 在激活工具里面没有找到cracker.jar,按照指导双击run.bat,但是打开之后闪一下就自动关闭了,不得其解.然后搜 ...

  3. Nginx:针对IPv4的内核参数优化

    这里提及的参数是和IPv4网络有关的linux内核参数,我们可以将这些内核参数的值追加到linux系统的/etc/sysctl.conf文件中,然后使用如下命令使修改生效: [root@bogon ~ ...

  4. 蚁群算法求解旅行商问题(附c和matlab源代码)

    前几天写了个模拟退火算法的程序,然后又陆陆续续看了很多群智能算法,发现很多旅行商问题都采用蚁群算法来求解,于是开始写蚁群算法的模板.网上关于蚁群算法的理论很多就不再这里赘述了,下面直接上代码和进行简单 ...

  5. JavaScript中关于时间的知识点

    1.计算时间差,天数,小时数,余数 var begintime_ms = Date.parse(new Date(begintime.replace(/-/g, "/"))); / ...

  6. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  7. [PHP] Phalcon应用升级PHP7记录

    升级主要有 php7, phalcon, extension 这三个方面工作. [php7] 我选择从 git 中源码包安装,下面是主要安装步骤: git clone -b php- https:// ...

  8. 新版本MySQL Server 5.7的免安装版本设置

    今天重新配置电脑,安装java开发运行的相关环境,在安装mysql的过程中,遇到了一些问题. 因为在网站上下载的是免安装版本的mysql 5.7 ,所以在安装过程中只需要解压缩zip的压缩包即可. 之 ...

  9. javascript里的继承

    js里面继承的方式, 1. 类式继承,通过构造函数的继承 function extend(subClass, superClass){ var F = function(){}; F.prototyp ...

  10. shell中括号的使用

    在这里我想说的是几种shell里的小括号,大括号结构和有括号的变量,命令的用法,如下: 1.${var} 2.$(cmd) 3.()和{} 4.${var:-string},${var:+string ...