<!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. linux中的namespace

         本文将就namespace这个知识点,进行简单的归纳总结,力求通俗易通.在资料汇总的过程中,参考了许多网上的博客资料,在文章尾部给出相关链接.      namespace,命名空间,从名字 ...

  2. Winfrom皮肤样式的使用

    IrisSkin类库提供了可供我们使用的设置窗体皮肤的类,简单地说,就是给我们提供了一个皮肤引擎,通过设置皮肤引擎来达到我们想要的窗体界面. 具体的开发步骤: (1)引入IrisSkin.dll文件 ...

  3. C语言 猜数游戏--产生一个随机数

    #include <stdio.h> #include <time.h> #include <stdlib.h> int main(int argc, const ...

  4. 实验三——SDRAM

    一.运行环境 开发板:jz2440 系统:  ubuntu12.04 编译器:arm-linux-gcc 二.特殊寄存器 sdram的操作无需按照时序图来设置,只要设置好相关的13个寄存器,arm处理 ...

  5. WP开发笔记——程序的退出方法

    Windows Phone程序中,并没有之前的类似于“App.Exit()”之类的函数用来让你退出程序.这是怎么回事儿呢? 很简单,在Windows Phone 7中系统要求配备了硬件的“Back”键 ...

  6. ARP协议详解

    ARP协议:地址解析协议,将IP地址映射到MAC地址. ARP缓存:每个主机都有存储IP地址和MAC地址的缓冲区.每条记录最长生存时间为10分钟,如果一条记录2分钟没有使用,则会被删除.如果始终在使用 ...

  7. Messagebox.Show()常用参数设置

    private void button1_Click(object sender, EventArgs e) { MessageBox.Show(" 1 个参数 " ); } pr ...

  8. MediaRecorder类介绍

    audiocallbackvideojavadescriptorencoding 目录(?)[+] 找到个MediaRecorder类介绍和大家分享一下. Mediarecorder类在官网的介绍和在 ...

  9. wxPython + Boa 练习程序

    最近需要做点支持linux的跨平台gui,网上查到了wxPython及Boa,感觉不错,照着Boa文档做做练习. 代码: App: #!/usr/bin/env python #Boa:App:Boa ...

  10. php中调用用户自定义函数的方法:call_user_func,call_user_func_array

    看UCenter的时候有一个函数call_user_func,百思不得其解,因为我以为是自己定义的函数,结果到处都找不到,后来百度了一下才知道call_user_func是内置函数,该函数允许用户调用 ...