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. Android学习笔记（十七）——使用意图调用内置应用程序

    使用意图调用内置应用程序 1.创建一个新的Android项目并命名为Intents,在main.xml文件里加入两个Button: <Button android:id="@+id/b ...

  2. 100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全

    Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的 ...

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

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

  4. mobilize扁平化的fullPage.js类工具使用心得

    可以生成一个fullPage效果的主页,但是列表页面和内容页面呢? 主页中的block,可以选择多种组建生成.甚至连form都有: 应该改造其源代码,动态化和cms系统化,添加二三级页面模板: ＝＝ ...

  5. gets scanf以及缓冲区域的问题

    1:scanf scanf会忽略开头所有的空格,并以Space Enter Tab 结束输入, 不会舍弃最后的回车符(即回车符会残存在缓冲区域中) 2:getchar getchar以Enter结束, ...

  6. 微信开放平台 获取 component_verify_ticket

    <?php /** * @author zhaozhuobin * @date:2016-06=07 * */ namespace common\components;use DOMDocume ...

  7. web测试 结果存储类型为“Database”，但尚未指定结果储存库连接字符串

    vs2010 Ultimate版带有web测试功能,可以对网站的性能以及负载进行测试. 在进行负载测试时提示“异常 LoadTestConnectStringMissingException 1 Lo ...

  8. judge loop in undirected graph

    一 深度优先遍历,参考前面DFS(white and gray and black) 二 根据定点以及边数目进行判断 如果m(edge)大于n(vertex),那么肯定存在环 算法如下: 1 删除所有 ...

  9. 我的Python成长之路---第七天---Python基础（22）---2016年2月27日（晴）

    socket网络编程 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. ...

  10. UI 公钥加密

    RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. RSA基本原理 RSA使用"秘匙对&q ...