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. Hibernate_13_QBC查询

    Employee类.Department类.SessionFactoryTools类.Employee.hbm.xml文件.Department.hbm.xml文件.Hibernate.cfg.xml ...

  2. Android蓝牙开发深入解析

    1. 使用蓝牙的响应权限  代码如下: <uses-permission android:name="android.permission.BLUETOOTH" /> ...

  3. php的迭代器

    接口Iterator 主要需要实现的方法: abstract public mixed current ( void ) abstract public scalar key ( void ) abs ...

  4. poj 2094 多项式求和。

    /** 给出多项式 p(x) = an*x^n + an-1*x^(n-1)..... + a1*x + a0; 给定n,l,k,m 计算 x 从 l到 l+k-1 的p(x)的后m 位的平方的和 用 ...

  5. android linearlayout 把控件view置底部（放在页面最下方）

    <LinearLayout android:id="@+id/recLayout" android:layout_width="fill_parent" ...

  6. 最小生成树Prim算法

    文章作者:甘航  文章来源:http://www.cnblogs.com/ganhang-acm/转载请注明,谢谢合作. 由于数据结构老师布置的一道题 ,我看prim算法看了半天还是一知半解. 在浏览 ...

  7. 解题报告 HDU1087 Super Jumping! Jumping! Jumping!

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  8. WAMP多站点配置，更改服务器端口

    修改apache.conf的配置文件 设置保存路径 原本的路径:DocumentRoot "D:/wamp/www/" 修改为自己定义的路径:D:\all_code\php 查询: ...

  9. ubuntu卸载vmware

    下面方法摘抄网上方法,经过证实好使 lsmod——显示已载入系统的模块 ps aux : 显示其他用户启动的进程(a)   查看系统中属于自己的进程(x)         启动这个进程的用户和它启动的 ...

  10. [Swust OJ 465]--吴奶奶买鱼(0-1背包+dfs)

    题目链接:http://acm.swust.edu.cn/problem/465/ 还有一道题只是描述不一样,方法一模一样(http://acm.swust.edu.cn/problem/644/) ...