JS学习笔记 - 普通选项卡（面向过程）

最新推荐文章于 2022-03-12 16:31:23 发布

weixin_30321449

最新推荐文章于 2022-03-12 16:31:23 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/carpenterzoe/p/10196619.html

版权

疑问：

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>