javascript 实现选项卡

今天下午的两节课，在机房闲来没事 ，就学习了javascript 怎么获取HTML的标签，改变CSS样式，资料来源 智能社！

 <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 ()

          {

           // alert(this.value);

           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>
 <body>

 <div id="div1">

 <input class="active" type="button" value="A" />

 <input type="button" value="B" />

 <input type="button" value="C" />

 <input type="button" value="D"/>

    <div style="display:block"> 1月</div>

    <div> 2月2月2月2月2月</div>

    <div> 3月3月3月3月3月3月</div>

    <div> 4月4月4月4月4月4月</div>

 </div>

 </body>

<style>

#div1 .active{ background:#FFFF00;}

#div1 div{ width:150px; height:200px; background:#CCCCCC; border:1px solid #CCCCCC; display:none;}

</style>

闲扯 Javascript 01 实现选项卡的更多相关文章

  1. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  2. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  3. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  4. JavaScript效果之选项卡

    拼了命学习js,想把学到的Javascript效果,可以记在博客里,在记录过程中,加深理解. gogogo,第一个效果,选项卡. 一.选项卡效果的实现思路 选项卡效果的应用很广泛,几乎所有的网站都会用 ...

  5. javascript与jQuery选项卡效果

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  6. javascript简单的选项卡

    实现一个简单的选项卡功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. 用JavaScript实现的选项卡

    Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  8. 闲扯 Javascript 00

    引言 Javascript  的作用在此就不阐述了,相信你已经知道它的用途!那我说点什么呢? 不如就和大家先扯一把,后面的工作 随后后展开吧! 首先声明:我个人对Javascript 认识,我只知道它 ...

  9. 初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、

    Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和su ...

随机推荐

  1. SVN使用技巧

    安装 下载SVN服务端:VisualSVN Server https://www.visualsvn.com/downloads/ 安装,下一步...(更改地址,Location是安装目录,Repos ...

  2. 杭电ACM水仙花数

    水仙花数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  3. html5之histroy浅析

    history是HTML5的新特性,我们可以使用它操作这个历史记录堆栈. (1)history提供了对浏览器历史纪录堆栈的读取,同时实现在访问记录中的前进和后退: history.length 历史记 ...

  4. JQuery隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. Nginx阅读笔记

    Nginx最常用的服务是提供反向代理,大家熟悉的最多的是正向代理,正向代理我们平常接触的最多,例如云梯,我们通过代理服务器作为客户端这边的中介接受请求,隐藏真实的客户,向服务器获取资源.而反向代理顾名 ...

  6. Qt之OpenSSL（有pro文件的路径格式）

    简述 OpenSSL是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 简述 下载安装 使用 更多参考 下载安装 ...

  7. Error creating bean with name 'enableRedisKeyspaceNotificationsInitializer'

    @Configuration public class HttpSessionConfig { @Bean public static ConfigureRedisAction configureRe ...

  8. UVA 10652 Board Wrapping(凸包)

    The small sawmill in Mission, British Columbia, hasdeveloped a brand new way of packaging boards for ...

  9. Codeforces 41D Pawn 简单dp

    题目链接:点击打开链接 给定n*m 的矩阵 常数k 以下一个n*m的矩阵,每一个位置由 0-9的一个整数表示 问: 从最后一行開始向上走到第一行使得路径上的和 % (k+1) == 0 每一个格子仅仅 ...

  10. [置顶] C++ Pirate： Lambda vs Bind

    Lambda 与 Bind的性能比较 转载请说明出处:http://blog.csdn.net/cywosp/article/details/9379403 先让我们看看下面函数: template ...