<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #div1 .active

        {

            background: yellow;

        }

        #div1 div

        {

            width: 200px;

            height: 200px;

            background: #808080;

            border: 1px solid #f00;

            display: none;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

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

            var aBtn = oDiv.getElementsByTagName("input");

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

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

                //给每一个按钮增加一个Index属性

                aBtn[i].index = i;

                //给按钮增加事件

                aBtn[i].onclick = function () {

                    //先把所有的btn的class改成无

                    for (var j = 0; j < aBtn.length; j++) {

                        aBtn[j].className = '';

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

                    }

                    //当前点击的按钮是this

                    this.className = "active";

                    alert(this.index);

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

                }

            }

        }

    </script>

</head>

<body>

    <div id="div1">

        <input type="button" class="active" value="教育" />

        <input type="button" value="培训" />

        <input type="button" value="招生" />

        <input type="button" value="出国" />

        <div style="display: block">11111111</div>

        <div>22222222</div>

        <div>33333333</div>

        <div>44444444</div>

    </div>

</body>

</html>

　　

Javascript 选项卡的更多相关文章

  1. javascript选项卡2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  3. JavaScript选项卡

    实现js选项卡 html的代码如下: <div class="tabdiv"> <ul class="tabs" id="oTab& ...

  4. 原生javascript选项卡

    js选项卡是一个常用的实现.这里我们将用原生js来将其给予实现. 首先html代码: <div id="container"> <input type=" ...

  5. javascript选项卡切换样式

    HTML代码 <ul class="touzi_xuan1" id="qixian"> <li>****: </li> &l ...

  6. 用JS制作简易选项卡

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  7. 实用的Jquery选项卡TAB

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 选项卡tab2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. easyui---tabs(选项卡)

    配置好easyui环境 1.笔记: tabs(选项卡) class:class="easyui-tabs" //<div class="easyui-tabs&qu ...

随机推荐

  1. DataGrid1

    2013-09-2512:26:31 1.DataGrid页面 <asp:DataGrid ID="msgInfo1" PageSize="8" Auto ...

  2. Java线程角度的内存模型和volatile型变量

    内存模型的目标是定义程序中各个变量的访问 规则,即在虚拟机中将变量(包括实例字段,静态字段和构成数组对象的元素,不包括局部变量与方法参数,因为后者是线程私有的)存储到内存和从内存中取出变量这样的底层细 ...

  3. 基础学习总结（四）---内存获取、XML之PULL解析

    外部项目引入如果没找到工程文件要先创建一个android项目在引入. 根据要查看的项目名在项目中搜索逐步查看 ==================== 内存详情获取: public class Mai ...

  4. ajax对一些没有接口的数据进行分析和添加方法

    对于一些没有接口的数据进行分析和添加方法: <script src="ajax.js"><script>//插入ajax文件 <script> ...

  5. 用golang启动一个daemon

    用golang启动一个daemon package main import ( "fmt" "log" "os" "runtime ...

  6. Python中docstring文档的写法

    该写法根据Python的PEP 257文档总结. 类的函数称为方法(method),模块里的函数称为函数(function) 每一个包,模块,类,函数,方法都应该包含文档,包括类的__init__方法 ...

  7. WPF 界面控件遍历和后台行为绑定写法

    InvokeCommandAction ic = new InvokeCommandAction(); ic.Command = tree.SelectedItemCommand;//绑定的命令 ic ...

  8. Linux环境下GIT初次使用

    Git是一个功能强大的分布式版本控制系统,最初用来作Linux内核代码管理的. 第一次接触到github是关于一个报道:在2013年1月15日晚间,全球最大的社交编程及代码托管网站GitHub突然疑似 ...

  9. ios按钮点击后翻转效果

    代码是网上找到的,不过找到的时候直接复制下来不能用,稍微整理下,为和我一样水平的菜鸟观摩一下下. (1)引入“QuartzCore.framework”库,头部引用. #include<Quar ...

  10. Scene (场景视图) 详解

    控制二维切换的按钮 点击2D按钮可以激活2D模式.这个按钮会将场景相机在透视视图和正交投影视图之间进行切换.当观察透视视图时,远离相机的物体看起来更小:然而,当正交投影视图的时候,物体的大小并不受相机 ...