<!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. 洛谷 P1209 修理牛棚== Codevs 2079 修理牛棚

    时间限制: 1 s   空间限制: 128000 KB   题目等级 : 黄金 Gold 题目描述 Description 在一个夜黑风高,下着暴风雨的夜晚,farmer John的牛棚的屋顶.门被吹 ...

  2. C#参数化SQL查询

    //写一个存储过程 ALTER PROCEDURE dbo.Infosearch ( @bmid smallint = null, @xm varchar()=null, @xb varchar()= ...

  3. WP开发笔记——页面传参

    WP APP页面与页面之间参数的传递可以通过程序的App类设置全局变量. 由于App 类继承自Application类,而通过Application的Current属性可以获取到与当前程序关联的App ...

  4. 杀死进程 kill -9

    cui@bug:~$ killall -h 用法: killall [选项]... [--] 进程名... killall -l, --list killall -V, --version -e,-- ...

  5. vim 安装与运行以及代码的运行

    vi功能是最弱的,也是*nix操蛋之后最基本的editor.后来vi被增强加入众多特性,这就是vim.再后来vim加入图形接口,gvim诞生了.功能最强的是gvim,它的很多特性vim并不支持,vi更 ...

  6. Window 8.1 计时器功能及图片切换

    <Canvas Margin="450,0" Width="795" Grid.Column="1"> <Image Ma ...

  7. c#键盘鼠标钩子

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  8. 删除select中所有option选项jquery代码

    select中所有option选项如何删除,本文使用jquery简单实现下,有此需求的朋友可以参考下,希望对大家有所帮助. 这样写 复制代码代码如下: <select id="sear ...

  9. trade 主要前端组件

    jQuery Custombox http://www.jqueryfuns.com/resource/view/27

  10. Mysql 创建数据库表（删除，删除，插入）

    MySQL 创建数据表 创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (col ...