<!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. AutoEventWireup="false"

    在 Web 服务器控件中,某些事件(通常是 Click 事件)会导致窗体被回发到服务器.HTML 服务器控件和 Web 服务器控件(如 TextBox 控件)中的更改事件将被捕获,但不会立即导致发送. ...

  2. pancake的排序- 1.3 一摞烙饼的排序 《编程之美》读书笔记03

    问题:     星期五的晚上,一帮同事在希格玛大厦附近的“硬盘酒吧”多喝了几杯.程序员多喝了几杯之后谈什么呢?自然是算法问题.有个同事说:“我以前在餐馆打工,顾客经常点非常多的烙饼.店里的饼大小不一, ...

  3. 设置textview显示框内容不可编辑不可选择。

    f1textview.allowsEditingTextAttributes=NO;////////////设置不可编辑不能用这个,得用下面的一个 textView.editable=NO;//设置可 ...

  4. win8.1环境下硬盘安装centos6.5双系统

    作为一名软件工程师或是相关行业的从业人员,经常会用到linux系统,这里为大家介绍的安装linux的方案是在原有win环境下安装linux双系统,两个系统选择分别为win8.1 和centos6.5. ...

  5. Ping N个IP测试网络连通性

    #-----------------------Smokeping移动节点-------------------##! /bin/bashecho "------------- Statin ...

  6. 学习php中常用语句与函数

    1.while循环多用于不清楚循环次数的情况下,如需要把从数据库中读取出的多条记录(不清楚到底有多少条)并且要根据某个字段的值进行分类,每类值的具体数目,如下图: 其中选项有三种值,对每个值的票数时行 ...

  7. C# Winfrom小黄鸡功能调用

    最近研究微信公众平台,搭建了一个微信聊天机器人,调用小黄鸡的公众接口,实现在线和小黄鸡聊天的功能. 接口调用不是很麻烦,不过是php版本,所以研究了一下C#的功能模块, Winfrom版 后台界面代码 ...

  8. XAML 概述一

    XAML的全称是Extensible Application Markup Language,就是我们所说的可扩展应用程序标记语言.XAML可以应用到许多不同领域,但主要用于构建用户界面. XAML是 ...

  9. java递归方法

    一个方法体内调用他自身,称为方法递归. 方法递归是一种隐式的循环,Tahiti重复执行某段代码,但这种重复执行无需循环控制 /* Author:oliver QIN DATE:2015-12-19 D ...

  10. [原创]CentOS6.4编译安装Facebook的folly库(gcc4.8.1boost1.5.3)

      Folly: Facebook Open-souce LibrarY,Facebook开源的一个基础组件库,据说在大规模的场景中性能较高.目前因为自己负责的系统有几个地方性能较差,因此特意找来看看 ...