选项卡

<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. Chapter 14_4 使用_ENV

    因为_ENV是一个普通的变量,我们可以像其他变量一样去对它进行赋值和访问. _ENV = nil 上面的赋值操作,将会使得在它之后的代码块不能直接访问全局变量.不过,对控制你的代码所使用的变量有用处. ...

  2. 接口post +json +bean

    public ReturnBean<DealBean> getMember(String tagtype, String tag) { try { String requestUrl = ...

  3. localStorage请使用getItem 和setITem

    最近看别人的代码,发现他们在从localStorage里面的时候喜欢用dot来操作,而不是get setItem,记得以前说过这个事.下面再说一次吧. 用dot方式来操作(   每次以'hello'= ...

  4. 给windows共享 目录付于权限

    1.点右监 共享给 某用户 2.点属性 -> 安全 加入  特定用户 3.域用户的管理 (选择控制面板/用户管理) 第一个用户是本地账户 第2/3个是域用户

  5. 2.4 chrome 开发者工具

    开发者工具顶部有Elements.Console.Network等八个栏目.常用的有三个:Elements,用来查看需爬取字段的HTML标签信息:Console,可以检测你的JS代码:Network, ...

  6. vs2010环境下将Win32控制台应用程序，改为Win32项目

    进入工程属性后,一次进入下面选项做相应修改 连接器 ---> 系统 --->子系统: 控制台 (/SUBSYSTEM:CONSOLE)改为:窗口 (/SUBSYSTEM:WINDOWS)

  7. 1-10w之间的整数中有几个完全平方数

    #include "stdio.h" #include<math.h> void main() { ,x,y; printf("1-10w之间的整数中有以下几 ...

  8. chrome浏览器调试工具的使用

    废话不多说,给大家介绍一下最基本的浏览器调试工具

  9. linux手工笔记

    一.vi编辑器常用命令: -------------------------------- •插入文字:I键A键 •退回命令模式:ESC •存盘:w •不存盘退出:q •存盘退出:wq •强制退出:q ...

  10. C# var 隐式类型 var 用法 特点

    var 关键字是C# 3.0 开始,在方法范围中声明的变量: var有以下特点: * 1.var在编译器编译的时候根据初始值推断出其的类型          * 2.不能赋值除了初始值类型之外的其他类 ...