<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. 湖南省第十二届大学生计算机程序设计竞赛 G Parenthesis

    1809: Parenthesis Description Bobo has a balanced parenthesis sequence P=p1 p2…pn of length n and q ...

  2. commonlisp教程以及学习笔记-01

    手上有两个教程,但是感觉这个教程可能更适合自己

  3. Java类与对象的基础学习

    1. 请输入并运行以下代码,得到什么结果? public class Test{ public static void main(String args[]){ Foo obj1=new Foo(); ...

  4. configSections

         由于最近一个项目的数据库变动比较频繁, 为了减少数据层的负担, 打算采用.net的MVC框架, 使用LINQ对付数据层.       这个框架的web.config文件里出现了configS ...

  5. CentOS下vm虚拟机桥接联网

    CentOS下vm虚拟机桥接联网   vm虚拟机下的桥接联网相当于虚拟机是一个独立的主机,直接与外网相连,这是比较好的连接方式,这样外网的机子就可以直接访问到虚拟机了.   首先虚拟机的联网方式设置为 ...

  6. BZOJ总览

    1040: [ZJOI2008]骑士 树上加了一条边 断边再树形DP 断边调了好久 要了解题目性质 1045: [HAOI2008] 糖果传递 中位数水题 内含数学方程 变量搞一搞 bzoj1053: ...

  7. sed 字符串替换

    1. sed替换的基本语法为: sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义. 2. 单引号” ‘ ’”是没有办法用反 ...

  8. 虚拟机CentOS-mini安装完成后的网络设置

    系统环境:虚拟机, CentOS-mini,x86-64, 1. 主机名设置 涉及的文件: /etc/hostname;  /etc/sysconfig/network 1.1 在/etc/hostn ...

  9. Python基础2- Hello,world

    第一个程序Hello,world! 交互式编程:在终端窗口中输入:python回车后直接进入python交互模式,然后在提示符>>>后面输入:print 'Hello,world!' ...

  10. Shell 编程基础之括号的作用

    一.小括号() 单小括号 命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命令和括号之间不必 ...