方法一：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>选项卡1</title>
  6.     <style>
  7.         #div1 div {
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: #ccc;
  11.             border: 1px solid pink;
  12.             display: none;  //默认不显示DIV
  13.         }
  14.  
  15.         #div1 .active {
  16.             background-color: greenyellow;
  17.         }
  18.     </style>
  19.     <script>
  20.         window.onload = function () {
  21.             var oDiv = document.getElementById('div1');
  22.             var aBtn = oDiv.getElementsByTagName('input');
  23.             var aDiv = oDiv.getElementsByTagName('div');
  24.  
  25.            for(i=0;i<aBtn.length;i++){
  26.                aBtn[i].index = i;                   //给按钮自定义一个index属性,用于改变DIV
  27.                aBtn[i].onclick = function () {
  28.                    for(i=0;i<aBtn.length;i++){
  29.                        aBtn[i].className = '';      //点击当前按钮时,取消对上一个按钮的设置
  30.                        aDiv[i].style.display = 'none';  //点击当前按钮时,取消对上一个按钮对应的DIV的设置
  31.                    }
  32.                    this.className = 'active';       //点击按钮时,背景颜色改变
  33.                    aDiv[this.index].style.display = 'block';
  34.                }
  35.            }
  36.  
  37.         }
  38.     </script>
  39. </head>
  40. <body>
  41.     <div id="div1">
  42.         <input class="active" type="button" value="教育"/>
  43.         <input type="button" value="培训"/>
  44.         <input type="button" value="招生"/>
  45.         <input type="button" value="出国"/>
  46.         <div style="display: block;">1234</div>
  47.         <div>2345</div>
  48.         <div>3456</div>
  49.         <div>4567</div>
  50.     </div>
  51. </body>
  52. </html>

方法二：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>选项卡2</title>
  6.  
  7. <style>
  8.  
  9.     #div1 div{height:200px; width:200px; border:1px solid purple}
  10.     #div1 .active{background-color: olivedrab;}
  11. </style>
  12. <script>
  13.     window.onload = function () {
  14.         var arr = [1234,"abcd","fsafa","fabf"];     //以数组的方式列出Div里面的内容
  15.         var aDiv = document.getElementById('div1');
  16.         var aBtn = aDiv.getElementsByTagName('input');
  17.         var oDiv = aDiv.getElementsByTagName('div')[0];     //获取选项卡内容区域第一个Div
  18.  
  19.         for (var i = 0; i < aBtn.length; i++) {
  20.             aBtn[i].index = i;      //给Div自定义的一个索引属性
  21.             aBtn[i].onclick = function () {
  22.                 for (var i = 0; i < aBtn.length; i++) {
  23.                     aBtn[i].className = '';     //清空上一步选项卡标签项的设置
  24.                 }
  25.                     this.className = 'active';      //点击时启用active类属性设置
  26.                     oDiv.innerHTML = arr[this.index];   //将数组元素赋给Div
  27.                     oDiv.style.display = 'block';       //显示Div内容
  28.             }
  29.         }
  30.     }
  31. </script>
  32. </head>
  33. <body>
  34. <div id="div1">
  35.     <input class="active" type="button" value="教育"/>
  36.     <input type="button" value="培训"/>
  37.     <input type="button" value="招生"/>
  38.     <input type="button" value="出国"/>
  39.     <br/><br/>
  40.     <div style="display: block;">1234</div>
  41.  
  42. </div>
  43. </body>
  44. </html>

JavaScript写选项卡的更多相关文章

  1. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  2. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  3. JavaScript写在Html页面的<head></head>中

    JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...

  4. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  5. javascript写在<head>和<body>里的区别

    Javascript写在哪里?概括起来就是三种形式:1. 内部:Html网页的<body></body>中:2. 内部:Html网页的<head></head ...

  6. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  7. javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  8. 用JavaScript写一个区块链

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

  9. 怎么分别javascript写在<head>里还是<body>里面?

    怎么分别javascript写在<head>里还是<body>里面? 具体哪些语句写在<body>里,哪些语句写在<head>里 满意答案 BeginN ...

随机推荐

  1. 【JavaScript】JavaScript脚本代码的位置及在页面中的执行顺序

    三.如何改变Javascript在页面的执行顺序 利用onload <script type="text/javascript">window.onload = f; ...

  2. VM参数简介

    http://www.cnblogs.com/yuzhaoxin/p/4083612.html block_dump Linux 内核里提供了一个 block_dump 参数用来把 block 读写( ...

  3. 为VS2010默认模板添加版权信息 .

    通过以下方式可以自定义CS类文件代码模板(以下为VS2010,VS2008类似): 1,打开VS的安装目录,例如 D:\Program Files\Microsoft Visual Studio 10 ...

  4. C++ Qt 访问权限总结

    总结:C++的访问修饰符的作用是以类为单位,而不是以对象为单位. 通俗的讲,同类的对象间可以“互相访问”对方的数据成员,只不过访问途径不是直接访问. 步骤是:通过一个对象调用其public成员函数,此 ...

  5. A problem is easy

    描述When Teddy was a child , he was always thinking about some simple math problems ,such as “What it’ ...

  6. framework&&library's root

    框架和文件集合的路径应该是相对路径而不是绝对路径 写法如下图所示:

  7. 自定义 404 与 500 错误页面，URL 地址不会重定向（一）

    对于 404 与 500 错误发生时,我们希望自己定义一个更加人性化的页面. 例子 当访问下面这个地址时: http://localhost/aaaa/bbb/ccc/ddd/eee/fff/ggg ...

  8. 重构2-Move Method（方法移动）

    重构同样非常简单,以至于人们并不认为这是一个有价值的重构.迁移方法(Move Method),顾名思义就是将方法迁移到合适的位置.在开始重构前,我们先看看一下代码: ) ) return 0.03; ...

  9. ilter()和find()的区别

    这是jQuery里常用的2个方法.他们2者功能是完全不同的,而初学者往往会被误导. 首先 我们看.find()方法:现在有一个页面,里面HTML代码为;程序代码 <div class=" ...

  10. 给VPS装桌面

    转自:百度经验  致谢! 1.首先我们要先升级一下软件源给安装桌面环境做准备. 执行命令:apt-get update   2.安装桌面环境或窗口管理器: apt-get install xubunt ...