<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. LoadRunner测试场景中添加负载生成器

    如何在LoadRunner测试场景中添加负载生成器 本文对如何在LoadRunner的测试场景中添加负载生成器,如何使用负载生成器的方法,总结形成操作指导手册,以指导测试人员指导开展相关工作. 1.什 ...

  2. [转载]const_cast

     1. 一个经典实例 /* 用法:const_cast<type_id> (expression) 该运算符用来修改类型的const或volatile属性.除了const 或volatil ...

  3. MVC3实现多个按钮提交

    有时我们需要在同一个Form表单中进行多个按钮的提交,来完成不同的功能.因为MVC中一个表单默认只能提交到一个Action处理,相对比较麻烦. 1.使用客户端脚本 我们可以view中加上如下代码: & ...

  4. hdu1520 Anniversary party (树形dp)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1520题意:上司和直系下属不能同时参加party,求party的最大活跃值.输入: 输入n个 ...

  5. 8611 大牛之路I

    时间限制:500MS  内存限制:1000K 提交次数:157 通过次数:62 题型: 编程题   语言: C++;C Description 要成为ACM大牛,要掌握很多必需的知识点.某些知识点可以 ...

  6. Angular跨域

    Angular 跨域很简单,记住格式就好,有一些细节的东西需要跟后台商量的 比如地址栏的callback前面是&还是?跨域的原理请参考<jsonp跨域> Angular 跨域代码 ...

  7. java中new关键字和newInstance()方法有什么区别？

    1.new可以调用带参数的构造函数,newInstance不可以. 2.new 是 java 的关键字,用来构造一个类的实例.而 newInstance 是 Class 的一个方法,不过两个写法的效果 ...

  8. Java学习——开端

    学号 <Java程序设计>第1周学习总结(1) 教材学习内容总结(第一章) Java最早是由Sun公司研发,原称Oak(橡树),开发者之一的James Gosling被尊称为Java之父. ...

  9. PHP、Java输出json格式数据

      PHP 输出json. $result = mysql_query($sql); //查询结果 $users=array(); $i=0; while($row=mysql_fetch_array ...

  10. Codeforces 629C Famil Door and Brackets（DP）

    题目大概说给一个长m的括号序列s,要在其前面和后面添加括号使其变为合法的长度n的括号序列,p+s+q,问有几种方式.(合法的括号序列当且仅当左括号总数等于右括号总数且任何一个前缀左括号数大于等于右括号 ...