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. 全栈JavaScript之路（七）学习 Comment 类型节点.

    凝视 在DOM中,用 Comment 类型 节点表示, 构造器函数为:  function Comment(){[native code]}. comment 节点的特征: nodeType:8 no ...

  2. Live Writer Test

    测试下LiveWriter写CNblog: 1.Source code plug-in: @Override public List getAll(String orgid,String start, ...

  3. swiper，animate使用方法

    1.先链接css和js文件 <link rel="stylesheet" type="text/css" href="css/swiper-3. ...

  4. 面向对象之静态方法(static)和实例化方法的区别

    这是一个经常被时时提出来的问题,很多时候我们以为理解了.懂了,但深究一下,我们却发现并不懂. 方法是我们每天都在写得,很多程序员大多都使用实例化方法,而很少使用静态方法,问原因也说不出来所以然,或者简 ...

  5. 【JAVA】修改项目包名

    从最后一层开始修改,一步步往上递增修改.

  6. 问题解决: WordPress on SAE注册邮件无法发送

    方法一: 修改代码 Step 1: 改写wp-includes/pluggable.php, 把WordPress默认邮件设置改为SMTP模式. // Set to use PHP's mail() ...

  7. Nginx 之五： Nginx服务器的负载均衡、缓存与动静分离功能

    一.负载均衡: 通过反向代理客户端的请求到一个服务器群组,通过某种算法,将客户端的请求按照自定义的有规律的一种调度调度给后端服务器. Nginx的负载均衡使用upstream定义服务器组,后面跟着组名 ...

  8. IT资源专业搜索-www.easysoo.cn

    创始人:samrthhl 时间:2015-11-8 关于易搜 易搜(www.easysoo.cn)是一个面向IT开发从业人员的专业资源搜索站点,它将全球的知名博客论坛.专业IT行业站点.知名咨询机构和 ...

  9. python--data type

    1.Python中常见的数据类型有: 数据类型    内建函数 整型    int(),long() 浮点型    float() 字符串型    str() 列表    list() 元组    t ...

  10. Linux内存分析

    Linux命令----分析内存的瓶颈    为了提高磁盘存取效率, Linux做了一些精心的设计, 除了对dentry进行缓存(用于VFS,加速文件路径名到inode的转换), 还采取了两种主要Cac ...