<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. 在Salesforce中可以对某一个Object的Standard Button或Link进行重写

    在Salesforce中可以对某一个Object的Standard Button或Link进行重写,来实现我们特定的逻辑过程,比如:在删除某个Object之前要判断该Object的某个Field的状态 ...

  2. 湖南省第十二届大学生计算机程序设计竞赛 B 有向无环图 拓扑DP

    1804: 有向无环图 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 187  Solved: 80[Submit][Status][Web Board ...

  3. 锤子banner

    查看效果: http://js.jirengu.com/negor/4/edit?html,output <!DOCTYPE html> <html> <head> ...

  4. flex_宽度补全

    宽度40px,另一个的补全宽度: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Hbase系统架构

    HBase 系统架构 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列 ...

  6. 最值得学习的10个C语言开源项目

    最好别下载最新版,因为代码量比较大,可以下载很早的版本 搜索词:开源 C Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我 ...

  7. 廖雪峰教程笔记：js中map和reduce的用法

    举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的 ...

  8. JAVA 加减乘除

    package homework; import javax.swing.JOptionPane; public class suanshu { public static void main(Str ...

  9. 2016.9.14 JavaScript入门之七面向对象和函数

    1.JavaScript中的变量,可以是对象,具有相应的属性: 2.我们也能够使用构造函数创建对象.构造函数的函数给出了一个大写的名称,以使它清楚地表明它是一个构造函数. 在构造函数中,这个变量是指由 ...

  10. HYSBZ 1588 营业额统计

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1588 题意:详见题面,中文 思路:平衡树的模板题. 可用Treap,Splay,Scape ...