<!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. CentOS 6.4 升级 Mysq5.5l方法 和 用户远程登录数据库

    一:.在这里我们都知道 系统的yum源Mysql版本一般都是5.1 5.2的比较多 但是有些程序 必须要5.5以上的版本才能支持 这时候我们应该怎么办呢  编译安装也太慢 太费时间  那么我们就必要要 ...

  2. 一个Ctrl+V下的问题

    对于电脑快捷键来说恐怕没什么比Ctrl+C和Ctrl+V更熟悉的了. 最近做了一个小程序,界面上有一个文本框,要做的事情就是把从别的地方复制内容后粘贴到文本框中,然后以自己处理后的格式显示出来. 为了 ...

  3. [react native] Error loading page

    如上图显示的错误,解决方法如下: 在react native ios项目的info.plist文件中,新增一个属性. 在Info.plist中添加NSAppTransportSecurity类型Dic ...

  4. Delphi XE5教程12：注释和编译器指示字

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误!也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者可 ...

  5. 批量修改文件后缀（Python）

    近期下载了很多各种教程, 但是不幸的是后缀名都是 ".mp4", 而本人喜欢 ".rmvb" 后缀,由于有轻微洁癖, 受不了后面的 ".mp4&quo ...

  6. SQL多表连接

    在KS系统中分配好权限以后,在用户登录的时候就要通过用户查到角色,通过角色查到界面,界面又属于某个菜单,一共要查4个表.并且不能有重复的记录这个时候就用到了SQL的内连接.SQL的多表连接很方便,以前 ...

  7. 解决ASP.NET使用IIS架设网站时“服务器应用程序不可用”的方法

    服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的“刷新”按钮重试您的请求. 管理员注意事项: 详述此特定请求失败原因的错误消息可在 Web ...

  8. 因修改system密码导致expdp备份失败

    今天发现一套系统的逻辑备份失效了,检查了一下,发现主要是由于之前其他管理员修改了system用户的密码,导致备份不成功了.为了今后此类的问题发生,修改expdp的脚本连接部分如下:expdp \' / ...

  9. Linux C 文件与目录1 创建目录

    linux C    创建目录 创建目录函数:mkdir 函数原型:int mkdir(char * pathname , mode_t mode); pathname字符指针是表示需要创建的目录路径 ...

  10. 20145120黄玄曦 《java程序设计》 寒假学习总结

    1和2.我对未来规划不多,我认为好好学习积累知识能帮助我应对未来的挑战,这是我的学习动力之一,此外,了解新知识满足好奇心也是我的主要的学习动力. 3.我认为专业课学习比公务员考试重要,我认为专业知识是 ...