<!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. DataGrid3

    a标签,DataGrid的数据绑定 1.function aa(id, url) {            //alert(id);            window.open(url + '&am ...

  2. Linux常用命令--文件的压缩和解压缩

    在Linux系统中,我们通常使用的文件压缩命令有:bunzip2 , bzip2 , cpio , gunzip , gzip ,split(切割文件) , zgrep(在压缩文件中寻找匹配的正则表达 ...

  3. Vim 保存和退出命令

    命令 简单说明 :w 保存编辑后的文件内容,但不退出vim编辑器.这个命令的作用是把内存缓冲区中的数据写到启动vim时指定的文件中. :w! 强制写文件,即强制覆盖原有文件.如果原有文件的访问权限不允 ...

  4. 引入OO开发报表后的感想

    很早就想尝试着在常规的报表开发中 引入OO了 趁着程序略复杂 时间略充裕 终于尝试了一把-咩哈哈~~ 以下来自我的evernote笔记 有点语无伦次-忍忍~~ -------------------- ...

  5. jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...

  6. zedboard之ubuntu环境变量设置

    在Ubuntu中有如下几个文件可以设置环境变量 1./etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. ...

  7. VS2010恢复默认编辑环境的设置

    VS2010恢复默认编辑环境的设置 VS2010在安装完成后初次打开的时候可以设置自己常用的环境为默认打开的编辑环境, 也可以在打开IDE以后通过如下步骤设置默认环境: Tools->Impor ...

  8. 版权控制之zend guard 6.0使用教程

    zend guard6.0使用教程.doc 一.准备工具 1. ZendGuard-6_0_0 下载地址:http://www.zend.com/en/products/guard/downloads ...

  9. 【Qt】Qt之自定义搜索框【转】

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 简述 效果 细节分析 Coding 源码下载 效果 ...

  10. c++中的指针问题

    c++和C语言一样,都有指针,指针通过变量的存储位置访问变量内容并进行修改,与引用不同的是,引用仅仅是给变量取一个别名,并不是一个对象,而指针则是一个对象. #include<iostream& ...