选项卡

<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. 【转】Java线程与Linux内核线程的映射关系

    Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...

  2. 使用Cookie来统计浏览次数，当天重复刷新不增加

    这是一种不严谨的做法,在浏览量不是很重要的时候可以使用 var oldCookie = Request.Cookies["newsCookie"]; if (oldCookie = ...

  3. 局域网iis添加主机头

    局域网上用主机头访问不像外网,直接设置主机头就行了, 在局域网设置了主机头还要修改host文件 打开host快捷的方法: win7在win+r运行里面运行C:\Windows\System32\dri ...

  4. 2015 Multi-University Training Contest 10

    1001 CRB and Apple 1002 CRB and Candies 1003 CRB and Farm 1004 CRB and Graph 1005 CRB and His Birthd ...

  5. ural 1352. Mersenne Primes

    1352. Mersenne Primes Time limit: 1.0 secondMemory limit: 64 MB Definition. If the number 2N−1 is pr ...

  6. @ResponseBody返回json时，json数据丢失或者报错

    现象: 1.报错:There is a cycle in the hierarchy! 2.返回至前台的json不完整,字段丢失. 错误原因: eg:entity1的属性有list<entiti ...

  7. 《Windows驱动开发技术详解》之读写操作

    缓冲区方式读写操作 设置缓冲区读写方式:

  8. VBS实现批量重命名文件并且操作前备份原有文件

    '=========================================================================='' VBScript Source File - ...

  9. VBS基础篇 - 对象(7) - TextStream对象

    VBS基础篇 - 对象(7) - TextStream对象   TextStream对象是用于访问文本文件的对象,它是FileSystemObject一个独立的附属对象,但在使用TextStream对 ...

  10. Javascript:scrollWidth,clientWidth,offsetWidth的区别（转）

    网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetW ...