搜索

首页  >  问答  >  正文

javascript - 一个js选项卡的例子中某次遍历的意思不太懂。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }

        .active{
            background: red;
        }
        
        #main p{
            width: 200px;
            height: 200px;
            background: yellow;
            display: none;
        }
    </style>

    <script>
        window.onload=function()
        {
            var op = document.getElementById('main');
            var oIp = op.getElementsByTagName('input');
            var ap = op.getElementsByTagName('p');

            for(var i=0;i<oIp.length;i++)
            {
                oIp[i].index=i;
                oIp[i].onclick=function()
                {
                    for(var i=0;i<oIp.length;i++)  // 就是这儿
                    {
                        oIp[i].className="";
                        ap[i].style.display="";
                    }
                    this.className="active";
                    ap[this.index].style.display="block"
                }
            }
        }
    </script>
</head>
<body>
    <p id="main">
        <input class="active" type="button" value="111">
        <input type="button" value="222">
        <input type="button" value="333">
        <input type="button" value="444">
        <p style="display: block">1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </p>
</body>
</html>

这是一个网上的选项卡的例子，然后不太懂例子中js部分，第二次for循环的意思是什么。。。QAQ

仅有的幸福仅有的幸福2744 天前820

全部回复(3)我来回复

  • 大家讲道理

    大家讲道理2017-06-30 10:00:54

    外面一层的for，主要是为了给每一个选项卡按钮绑定onclick事件。

    而里面的这个for，是在绑定的onclick事件之内，它的作用是，
    当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个for事件之内，它的作用是，

    当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个

    下面的：

    this.className="active";
ap[this.index].style.display="block";

    是把当前点击项对应的标签页显示出来。

    这样，就只有当前点击项对应的标签会显示出来，其余的标签页都被隐藏。
    如果没有这个for，当你点击第一个标签，第一个标签显示出来。
    然后你点击了第二个标签，第二个标签显示出来，现在就有第一个和第二个标签页同时显示；

    接着你点击了第三个标签，前面两个没有隐藏，而第三个标签页显示出来，…………

    这样，到最后，你点完所有的标签按钮时，所有的标签页都显示出来，这显然不是标签页的效果。for

    为了使当前点击之外的标签页都隐藏掉，所以在显示当前标签页之前，先用🎜遍历，把所有标签页隐藏。🎜

    回复
    0
  • 怪我咯

    怪我咯2017-06-30 10:00:54

    大致的功能是要实现点击切换到该选项卡。
    所谓切换，就是其他隐藏，当前显示。
    而你说的那部分就是隐藏所有 input 的。
    就是每次点击是，都遍历一次 所有 input, 去掉 class 和 display 属性，藏起来，
    然后单单为 this, 也就是当前点击项加上 class 和 display 属性，显示出来

    回复
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-30 10:00:54

    我给代码打上注释，看到注释就知道了！代码原理就是先清除所有input的类名和隐藏所有的p，然后给当前点击的input加上类名，显示当前索引对应的p!

        <script>
            window.onload=function()
            {
                var op = document.getElementById('main');
                var oIp = op.getElementsByTagName('input');
                var ap = op.getElementsByTagName('p');
                //遍历input
                for(var i=0;i<oIp.length;i++)
                {
                    //自定义属性index，（）
                    oIp[i].index=i;
                    //给每一个input绑定点击事件
                    oIp[i].onclick=function()
                    {    
                        //首先，清除掉所有的input的类名和p的样式（就是让所有p先隐藏）。
                        for(var i=0;i<oIp.length;i++)  // 就是这儿
                        {
                            oIp[i].className="";
                            ap[i].style.display="";
                        }
                        //当前的input添加类名
                        this.className="active";
                        //根据当前input的索引，把对应的索引的p加上样式（就是让对应的索引的p现实）
                        ap[this.index].style.display="block"
                    }
                }
            }
  </script>

    回复
    0
  • 取消回复