方法一：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选项卡1</title>

    <style>

        #div1 div {

            width: 200px;

            height: 200px;

            background-color: #ccc;

            border: 1px solid pink;

            display: none;  //默认不显示DIV

        }

        #div1 .active {

            background-color: greenyellow;

        }

    </style>

    <script>

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            var aBtn = oDiv.getElementsByTagName('input');

            var aDiv = oDiv.getElementsByTagName('div');

           for(i=0;i<aBtn.length;i++){

               aBtn[i].index = i;                   //给按钮自定义一个index属性,用于改变DIV

               aBtn[i].onclick = function () {

                   for(i=0;i<aBtn.length;i++){

                       aBtn[i].className = '';      //点击当前按钮时,取消对上一个按钮的设置

                       aDiv[i].style.display = 'none';  //点击当前按钮时,取消对上一个按钮对应的DIV的设置

                   }

                   this.className = 'active';       //点击按钮时,背景颜色改变

                   aDiv[this.index].style.display = 'block';

               }

           }

        }

    </script>

</head>

<body>

    <div id="div1">

        <input class="active" type="button" value="教育"/>

        <input type="button" value="培训"/>

        <input type="button" value="招生"/>

        <input type="button" value="出国"/>

        <div style="display: block;">1234</div>

        <div>2345</div>

        <div>3456</div>

        <div>4567</div>

    </div>

</body>

</html>

方法二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选项卡2</title>

<style>

    #div1 div{height:200px; width:200px; border:1px solid purple}

    #div1 .active{background-color: olivedrab;}

</style>

<script>

    window.onload = function () {

        var arr = [1234,"abcd","fsafa","fabf"];     //以数组的方式列出Div里面的内容

        var aDiv = document.getElementById('div1');

        var aBtn = aDiv.getElementsByTagName('input');

        var oDiv = aDiv.getElementsByTagName('div')[0];     //获取选项卡内容区域第一个Div

        for (var i = 0; i < aBtn.length; i++) {

            aBtn[i].index = i;      //给Div自定义的一个索引属性

            aBtn[i].onclick = function () {

                for (var i = 0; i < aBtn.length; i++) {

                    aBtn[i].className = '';     //清空上一步选项卡标签项的设置

                }

                    this.className = 'active';      //点击时启用active类属性设置

                    oDiv.innerHTML = arr[this.index];   //将数组元素赋给Div

                    oDiv.style.display = 'block';       //显示Div内容

            }

        }

    }

</script>

</head>

<body>

<div id="div1">

    <input class="active" type="button" value="教育"/>

    <input type="button" value="培训"/>

    <input type="button" value="招生"/>

    <input type="button" value="出国"/>

    <br/><br/>

    <div style="display: block;">1234</div>

</div>

</body>

</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. iOS开发——UI篇Swift篇&玩转UItableView（三）分组功能

    UItableView分组功能 class UITableViewControllerGroup: UIViewController, UITableViewDataSource, UITableVi ...

  2. oc-25-id类型，

    /** id:万能指针 能够指向任何OC对象. id = NSObject *, id cat = [Cat new]; [cat jump]; NSObject:是所有类的父类,基类.可以指向任何O ...

  3. error C2440:“类型转换":无法从“void (__thiscall Play1::* )(int *)”转换为“cocos2d::SEL_CallFucN

    转自:http://zhidao.baidu.com/link?url=VfSSkA0xfTVwNKaKh4tqW_sXlcsK-Rb16nEtQw5zaq5_306lnwJN3Kdb-rFp-r4L ...

  4. 第十二天--Property List和NSUserDefaults

    转自:http://appleparty.diandian.com/post/2012-05-24/9098104219 Property List  (属性表) 定义:Property List文件 ...

  5. IDEA 升级14.1提示org/hibernate/build/gradle/publish/auth/maven/AuthenticationManager:Unsupported major.minor version 51.0

    在看到“Unsupported major.minor version 51.0”这样的错误描述时,就基本可以肯定是jdk版本不正确导致.但是提示的类非业务系统,而是来自IDEA.因此去其官网检索了下 ...

  6. 如何在HTML5 图片预览

    HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...

  7. 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

    之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

  8. A C

    Problem Description Are you excited when you see the title "AC" ? If the answer is YES , A ...

  9. bigDecimal 使用小结

    关于四舍五入: 
ROUND_HALF_UP: 遇到.5的情况时往上近似,例: 1.5 ->;2 
ROUND_HALF_DOWN : 遇到.5的情况时往下近似,例: 1.5 ->;1 注 ...

  10. iOS 生成随机数 重复 不重复

    //编程的时候,有三条任选执行路径,都会显示一些图片,比如路径1显示的图片是一个人,路径2显示的是两个人,路径3显示任意人数的图片,要求每次进入该页面都不能重复初始的那张图片. 于是我想到了 运用随机 ...