<html>

<head>

<meta charset="UTF-8">

<title>tab</title>

<style>

#div1 div {

    width:200px;

    height:200px;

    border:1px red solid;

    display:none;

}

.active {

    background:red;

}

</style>

<script>

        window.onload=function () {

        var oDiv=document.getElementById('div1');

        var aInput=oDiv.getElementsByTagName('input');

        var aDiv=oDiv.getElementsByTagName('div');

        for(var i = 0;i < aInput.length; i++){

            aInput[i].index=i;

            aInput[i].onclick=function () {

            for(var i = 0;i < aInput.length; i++){

                aInput[i].className ='';

                aDiv[i].style.display='none'

            }

                this.className ='active';

                aDiv[this.index].style.display='block'

            }

        }

        }

    </script>

</head>

<body>

<div id="div1">

  <input type="button" value='1' class="active">

  <input type="button" value='2'>

  <input type="button" value='3'>

  <div style='display: block;'>111</div>

  <div>222</div>

  <div>333</div>

</div>

</body>

tab1的更多相关文章

  1. 数据库（update tab1 set tab1.name=tab1.name+(select t2.name from tab2 t2 where t2.id=tab1.id)）

    有t1 和 t2 两个表,表中的数据和字段如下: 执行 如下SQL语句: update tab1 set tab1.name=tab1.name+(select t2.name from tab2 t ...

  2. android 使用Tabhost 发生could not create tab content because could not find view with id 错误

    使用Tabhost的时候经常报:could not create tab content because could not find view with id 错误. 总结一下发生错误的原因,一般的 ...

  3. JQuery的基础和应用

    <参考文档>   1.什么是?    DOM的作用:提供了一种动态的操作HTML元素的方法.    jQuery是一个优秀的js库.用来操作HTML元素的工具.    jQuery和DOM ...

  4. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. Xamarin.Android之ActionBar与菜单

    一.选项卡 如今很多应用都会使用碎片以便在同一个活动中能够显示多个不同的视图.在Android 3.0 以上的版本中,我们已经可以使用ActionBar提供的Tab来实现这种效果,而不需要我们自己去实 ...

  6. 一步步学习javascript基础篇（9）：ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  7. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  8. GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1)

    GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1) 前言: 无意打开GooglePlay app来着,然后发现首页用了揭示效果,连起来用着感觉还不错. 不清楚 ...

  9. 从零开始编写自己的C#框架（17）——Web层后端首页

    后端首页是管理员登陆后进入的第一个页面,主要是显示当前登陆用户信息.在线人数.菜单树列表.相关功能按键和系统介绍.让管理员能更方便的找到息想要的内容. 根据不同系统的需要,首页会显示不同的内容,比如显 ...

随机推荐

  1. javascript的笔记精简版

    在写javascript的代码时一定要用单引号或者双引号括起来,不带引号的话就以字符串来处理 在javascript里面不能以纯数字或者click命名函数或者变量 要想修改标签的属性,在html里面怎 ...

  2. LoadRunner IP欺骗（转）

    直接转了篇运用LR来实现IP欺骗的文章. http://www.cnblogs.com/fnng/archive/2013/03/02/2940284.html

  3. Loadrunner的字符串函数

    String Function包括 lr_advance_param 指向参数文件中参数的下一个值. lr_convert_string_encoding 将字符串转换为其他编码. lr_decryp ...

  4. DSP using MATLAB 示例Example3.1 3.2 3.3

    上代码: w = [0:1:500]*pi/500; % [0,pi] axis divided into 501 points. X = exp(j*w) ./ (exp(j*w) - 0.5*on ...

  5. Android内存进程管理机制

    参考文章: http://www.apkbus.com/android-104940-1-1.htmlhttp://blog.sina.com.cn/s/blog_3e3fcadd0100yjo2.h ...

  6. Java第一天:安装搭建Java开发环境

    Java是面向对象的语言.它是通过虚拟机的运行机制来实现“跨平台”的. 这里不多说其他的,进入正题先,学习任何语言前的第一步都是要先搭建好开发环境,Java开发环境搭建如下: 1.到官网 http:/ ...

  7. iOS学习17之OC内存管理

    1.内存管理的方式 1> iOS应用程序出现Crash(闪退),90%的原因是因为内存问题. 2> 内存问题 野指针异常:访问没有所有权的内存,如果想要安全的访问,必须确保空间还在 内存泄 ...

  8. iOS学习11之OC继承

    面向对象的三大特性:封装,继承,多态. 1.继承 继承既能保证类的完整,又能简化代码. 把公共的⽅法和实例变量写在⽗类⾥,⼦类只需要写⾃⼰独有的实例变量和⽅法即可. 继承是⾯向对象三⼤特性之⼀,合理的 ...

  9. [NOIP2015]运输计划 D2 T3 LCA+二分答案+差分数组

    [NOIP2015]运输计划 D2 T3 Description 公元2044年,人类进入了宇宙纪元. L国有n个星球,还有n-1条双向航道,每条航道建立在两个星球之间,这n-1条航道连通了L国的所有 ...

  10. 【BZOJ4034】[HAOI2015]树上操作 树链剖分+线段树

    [BZOJ4034][HAOI2015]树上操作 Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 ...