选项卡

<title>无标题文档</title>

<style>

#div1 .active{background:#FF0;}

#div1 div{width:200px; height:200px; background:#666; border:1px solid #999;

         display:none;}

</style>

<script>

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++){

        aBtn[i].index=i;

        aBtn[i].onclick=function (){

            for(var i=0;i<aBtn.length;i++){

                aBtn[i].className='';

                aDiv[i].style.display='none';

                }

                this.className='active';

                aDiv[this.index].style.display='block';

            };

        }

    };

</script>

</head>

<body>

<div id="div1">

<input class="active" type="button" value="教育"/>

<input type="button" value="培训"/>

<input type="button" value="招生"/>

<input type="button" value="出国"/>

   <div style="display:block;">1111</div>

   <div>2222</div>

   <div>3333</div>

   <div>4444</div>

</div>

</body>

初探JavaScript魅力（四）的更多相关文章

  1. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  2. 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

    第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...

  3. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  4. 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01

    第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...

  5. 01 - 初探JavaScript魅力

    网页特效原理 用JavaScript修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页面元素的样式 鼠 ...

  6. 初探JavaScript魅力（五）

    JS简易日历    innerHTML <title>无标题文档</title> <script> var neirong=['一','二','三','四','五' ...

  7. 初探JavaScript魅力（二）

    行为,样式,结构三者分离(javascript, css, html),不要在行间加行为,样式 样式优先级:*<标签<class<ID<行间 style与className,如 ...

  8. 初探Javascript魅力(1)

    转自:CSDN--http://blog.csdn.net/cherry_vicent/article/details/42120149 1.javascript是什么   根据用户的一些操作,然后来 ...

  9. 初探JavaScript魅力（三）

    复选框的全选.反选和不选 <title>无标题文档</title> <style> body{background:#666;} </style> &l ...

随机推荐

  1. MVC3+EF4.1学习系列(六)-----导航属性数据更新的处理

    通过上一篇的学习 我们已经知道怎么查询关系 这篇就来说说怎么导航属性数据更新时的处理 以及EF又会为我们生成哪些SQL~ 老规矩 先看下今天的图 添加和修改页面基本就是这样 这节的内容相对简单~~ 主 ...

  2. javascript动画效果之多物体透明度

    html和css 仅为布局,需要注意的是filter对应的是老版本的ie浏览器透明度,而opacity对应的其他浏览器的透明度 filter: alpha(opacity: 50); opacity: ...

  3. 表单属性问题readonly、disabled、checked，prop的使用

    获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误.jQuery第一次分配undefined值的属性,而忽略了浏览器 ...

  4. 笨方法学python--参数，解包，变量

    1 cmd中执行 python ex11.py, ex11.py部分也是所谓的"参数". 2 from sys import argv script, first, second, ...

  5. 浅谈 zookeeper 原理,安装和配置

    当前云计算流行, 单一机器额的处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,那么这些信息如何推送到各个节点?并且 ...

  6. 错误提示 Unsupported compiler 'com.apple.compilers.llvmgcc42' selected for architecture 'i386'

    转自http://blog.csdn.net/cyuyanenen/article/details/51444974 警告提示:Invalid C/C++ compiler in target Cor ...

  7. HDU2202--最大三角形（凸包，枚举）

    Problem Description 老师在计算几何这门课上给Eddy布置了一道题目,题目是这样的:给定二维的平面上n个不同的点,要求在这些点里寻找三个点,使他们构成的三角形拥有的面积最大.Eddy ...

  8. Java动态绑定的内部实现机制

     JAVA虚拟机调用一个类方法时,它会基于对象引用的类型(通常在编译时可知)来选择所调用的方法.相反,当虚拟机调用一个实例方法时,它会基于对象实际的类型(只能在运行时得知)来选择所调用的方法,这就是动 ...

  9. javaWEB总结(4):ServletContext对象方法

    前言:之前每次学到ServletContext对象都会抗拒,跳着学,后面才发现有很多不懂的原理都在这个对象里面,后悔莫及,所以今天特地把他单放在一篇文章里,算是对他的忏悔. 1.什么是ServletC ...

  10. (转载)测试工具monkey

    转自http://www.418log.org/post-32.html 1)进入shell 在桌面点开始--运行 输入cmd 点确定 或打开 cmd.exe 进入sdk tools目录如: 1 C: ...