不废话 直接上代码:

        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. Python之字符串小代码解析

    本篇只是拿一段代码来对python中的字符串的一些使用做解释,来让大家更加了解python Python 3.4.0 (v3.4.0:04f714765c13, Mar 16 2014, 19:25: ...

  2. java多线程详解(3)-线程的互斥与同步

    前言:前一篇文章主要描述了多线程中访成员变量与局部变量问题,我们知道访成员变量有线程安全问题,在多线程程序中 我们可以通过使用synchronized关键字完成线程的同步,能够解决部分线程安全问题 在 ...

  3. js面向对象,多种创建对象方法!

    1.对象字面量. var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(this.hour+":&quo ...

  4. ssh学习小记

    ssh 为Secure SHell 的缩写.OpenSSH: ssh协议的开源实现.  SSH协议版本 v1: 基于CRC-32做MAC,不安全:man-in-middle v2:双方主机协议选择安全 ...

  5. mysql备份文件注释乱码处理工具

    我们有时候需要做mysql数据库的注释,可是备份出来的是乱码,怎么办呢? 本工具软件来帮你的忙. 将GBK库备份后的文本文件中夹带的UTF8乱码转换为GBK编码,就不再乱码了. http://down ...

  6. C# 5.0新推出的async和await

    class Program { static void Main(string[] args) { Test t = new Test(); } } public class Test { publi ...

  7. python smtplib发送邮件遇到的认证问题

    python的smtplib模块主要是用来发送邮件的,使用起来比较方便. 使用程序发送邮件只需要写以下几行代码就OK了: #!/usr/bin/env python import smtplib s ...

  8. 利用windows服务+timer或者windows任务计划程序+控制台进行进行每日邮件推送

    1.邮件发送代码 using System.Text; using System.Net; using System.Net.Mail; using System.Reflection; using ...

  9. Linux_arm驱动之按键模拟脉冲实现定时器的精确计时

    /***************************************************************** 内核驱动部分button_ker.c ************** ...

  10. java的继承

    1.什么是继承:一个类从另外一个类中得到成员.属性和行为方法等. 案例: //父类 public class Animal { // 变量 public int height=1; // 方法 pub ...