<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. barabasilab-networkScience学习笔记4-无标度特征

    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...

  2. jq中.prop()与attr()的区别

    一,定义 prop() 方法设置或返回被选元素的属性和值.prop() 方法应该用于检索属性值 attr()  方法设置或返回被选元素的属性和值.如需检索 HTML 属性,请使用 attr() 方法代 ...

  3. Memcached集群代理软件magent安装小结

    magent是一个memcached代理软件(memcached agent),又叫memagent. (magent is a simple but useful proxy program for ...

  4. js高级技巧之高级定时器

    实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级. 可以吧js想象成在时间线上运行的. JavaScript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行. 1.重复的定时器: ...

  5. css的重置和原子类的使用

    @charset "utf-8";/* Reset Definitions*/body, div, p, a, ul, ol, li, dl, dt, dd, h1, h2, h3 ...

  6. hdu2191 多重背包

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2191 多重背包:有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是 ...

  7. yii2.0 的数据的 增

    增加数据 /**     * 添加数据  controller 层     */ //引入对应的model类 use app\models\About; //定义对应的方法固定的actionxxxx ...

  8. .Net Mvc3框架调用服务端控件解决方案

      /*BY:Wangyexin date:2011年4月30日 20:17:38*/ /*说明:.net mvc3框架,View层调用服务端控件,输出到.cshtml文件中显示*/ 1.先说说.ne ...

  9. CSS 样式使用

    [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值的元素. [attribute~=value] 用于选取属性值中包含指定词汇的元素. ...

  10. Delphi 包的设计思想及它与PAS、BPL、DCU、DLL、OXC的关系。

    DCP ,BPL分别是什么文件,起什么作用?你在DELPHI中建立一个package然后保存一下,看看. bpl和Dll比较相似.只是BPL是BORLAND自己弄出来的东西!!!调用也和调用DLL相似 ...