选项卡

<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. hdu 1408 盐水的故事

    Problem Description 挂盐水的时候,如果滴起来有规律,先是滴一滴,停一下:然后滴二滴,停一下:再滴三滴,停一下...,现在有一个问题:这瓶盐水一共有VUL毫升,每一滴是D毫升,每一滴 ...

  2. Python 文本处理的应用

    最近根据公司运营部需求要对mongo数据库中的相关信息进行统计,本人一般喜欢将数据库服务器中相关的数据导出来(PS:其一由于Mongo为Nosql,在涉及关联表时不好处理,其二是因为虽然为测试环境,但 ...

  3. (转载)CSS中zoom:1的作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

  4. 杭电21题 Palindrome

    Problem Description A palindrome is a symmetrical string, that is, a string read identically from le ...

  5. gcc及其选项详解 【转载】

    1.简介: gcc是gnu旗舰产品,目前基本上就是和unix捆绑在一起分发的.这个东西功能强大,但是有多达上千个选项,其用户手册也有将近一万行.虽然其中的多数选项平时很少用到.但是不管装软件还是写程序 ...

  6. dfs + 最小公倍数 Codeforces Round #383 (Div. 2)

    http://codeforces.com/contest/742/problem/C 题目大意:从x出发,从x->f[x] - > f[f[x]] -> f[f[f[x]]] -& ...

  7. linux之ls -l|grep "^-"|wc -l命令

    查看某文件夹下文件的个数 ls -l |grep "^-"|wc -l 或 find ./company -type f | wc -l 查看某文件夹下文件的个数,包括子文件夹里的 ...

  8. Quartz任务调度器及与Spring的整合使用

    参考  点击打开链接

  9. 【2】docker 与UFW

    ufw是一个主机端的iptables类防火墙配置工具. 1.查看ufw的状态:ufw status 2.如果使用UFW,需要对其进行修改才能让DOCKER工作.docker使用一个网桥来管理容器中的网 ...

  10. 终于购入Mac mini，发现HDMI接口与显示器不兼容，网购了一个VGA转换插头

    Mac mini买到了,最便宜的i5,$647,足够了. 发现路边捡的显示器没有HDMI接口,所以在学校图书馆问了一下IT 技术支持,给我推荐了ebay上$10块钱的转换器. 名字叫 Mini Dis ...