疑问：

1. getElementsByTagName 和 getElementsByClassName  的区别？ 分别在什么应用场景？ 
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>普通选项卡</title>

    <style>

    #div1 input{

        background: white;

    }

    #div1 input.active{

        background: yellow;

        /* 这里直接给className为active的标签设置颜色，

            1. 第一个按钮默认是黄色，所以需要先设置。

            2. js只需要先清空所有input的className，再把点击的this按钮 className变成active。

            不应该用js设置颜色式样！错误： aBtn[i].style.background-color = yellow;

         */

    }

    #div1 div{

        width: 200px;

        height: 200px;

        background-color: #ccc;

        display: none;

    }

    </style>

    <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的index顺序变成数值，以便于后面aDiv使用

            aBtn[i].onclick = function()

            {

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

                {

                    aBtn[i].className = '';          // 先清空 所有按钮 和 div 的样式

                    aDiv[i].style.display = 'none';

                };

                this.className = 'active';         // 把点击的 这个按钮 类名 变成 ‘active’

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

                // 和按钮序号相对应的div，display变成block

                // aDiv[this.index]  ==> aBtn[i].index = i

                // 把aBtn的index顺序变成数值，以便于后面aDiv使用

                //疑问，怎么不能直接写 aDiv[i] ？

            };

        };

    };

    </script>

</head>

<body>

    <div id="div1">

        <input class="active" type="button" value="aaa">

        <!-- 默认把第一个按钮的class设置为active，即背景色为yellow -->

        <input type="button" value="bbb">

        <input type="button" value="ccc">

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

        <!-- 默认把第一个div的display设置为block-->

        <div>我梦见你梦见我</div>

        <div>14597825</div>

    </div>

</body>

</html>

错误1：

<script>

    window.onload = function ()

    {

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

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

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

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

        {

            aBtn[i].index = i;

            aBtn[i].onclick = function()

            {

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

                        aBtn[i].className = '';

                        aDiv[i].style.display = 'none';

                    }

                // aBtn[i].className = '';

                // 不是直接在onclick事件里 用 aBtn[i] 给其他所有按钮、div设置样式。

                // aBtn[i] 只表示单个，再用一个for循环来处理，才表示全部。

                this.className = 'active';

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

            }

        }

    }

    </script>

错误2：

<script>

    window.onload = function()

    {

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

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

        {

            aBtn[i].onclick = function()

            {

                //aBtn[i].className = 'active'; 

                this.className = 'active';

                // 当前事件作用于 this， 所以给 this 加 className

            };

        };

    };

    </script>

JS学习笔记 - 普通选项卡（面向过程）的更多相关文章

  1. JS学习笔记 - 面向对象 - 选项卡 （普通选项卡改写）

    选项卡3 <script> window.onload=function () { new TabSwitch('div1'); }; function TabSwitch(id) // ...

  2. C#学习笔记——面向对象、面向组件以及类型基础

    C#学习笔记——面向对象.面向组件以及类型基础 目录 一 面向对象与面向组件 二 基元类型与 new 操作 三 值类型与引用类型 四 类型转换 五 相等性与同一性 六 对象哈希码 一 面向对象与面向组 ...

  3. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  4. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  5. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  6. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  7. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  8. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. 【Uva 10618】Tango Tango Insurrection

    [Link]: [Description] 玩跳舞机. 有一定的约束. 归纳起来就是以下三点 1.两只脚不能同时踩一个位置 2.如果左脚踩在了右键上,那么下一次移动的一定要是左脚 3.如果右脚踩在了左 ...

  2. WPF通用框架ZFS《项目结构介绍01》_模块介绍

    首页介绍: 下图为项目运行首页图片, 大的结构分为三块: 1.Header首部模块(存放通知组件[全局通知.消息管理 ].扩展模块[皮肤.系统设置.关于作者.退出系统]) 2.Left左侧菜单模块(存 ...

  3. C#获得文件夹下文件名

    String path = @"X:\xxx\xxx"; //第一种方法 var files = Directory.GetFiles(path, "*.txt" ...

  4. iterator的使用和封个问题

    这篇文章的内容还是不错的: http://www.cnblogs.com/zhuyf87/archive/2012/12/08/2808290.html for (vector<int>: ...

  5. 解决WIN7远程登录提示无法保存凭据的问题

    事由:今天到公司,想起手上还有点小东西没有改动完,就打算连上server进行小改动.结果发现昨天还能好好的远程连接server的WIN7,今天突然间不能远程登录了~ 无奈~悲催~ 我仅仅能猜是不是有什 ...

  6. ocdefirst安装更新数据库

    数据迁移(Migrations) 启用数据迁移在控制台中输入如下命令:Enable-Migrations 这时会在项目目录中增加一个Migrations文件夹,里面放置了两个文件:EF会通过C#代码的 ...

  7. C#开发 —— 泛型，文件

    泛型的目标是采用广泛适用和可交互性的形式来表示算法和数据结构 —— 参数化 泛型能子啊编译时提供强大的类型检查,减少数据类型之间的显式转换,装箱操作和运行时的类型检查 泛型的类型参数T可以被看作是一个 ...

  8. Gym 100952 C. Palindrome Again !!

    http://codeforces.com/gym/100952/problem/C C. Palindrome Again !! time limit per test 1 second memor ...

  9. jq--图片懒加载

    html 1.给图片不给真真意义上的src属性路径,可通过我们自己想要添加时改变它的属性路径即可. 2.要获取浏览器中三种高度. $(window).height();//屏幕高度 $(window) ...

  10. 今日 SGU 5.6

    SGU 106 题意:问你有多少个<x,y>,满足ax+by+c=0,x1<=x<=x2,y1<=y<=y2 收货:拓展欧几里得求解的是这种方程,ax+by=1,g ...