recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Je ne comprends pas très bien la signification d'un certain parcours dans un exemple d'onglet 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>

Ceci est un exemple d'onglet sur Internet, mais je ne comprends pas très bien la partie js de l'exemple et ce que signifie la seconde boucle for. . . QAQ

仅有的幸福仅有的幸福2744 Il y a quelques jours819

répondre à tous(3)je répondrai

  • 大家讲道理

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

    La couche externe de for sert principalement à lier les événements onclick à chaque bouton d'onglet.

    L'événement for inside est dans l'événement lié onclick事件之内，它的作用是，
    当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个for. Sa fonction est la suivante :

    Lorsque l'onglet lié est cliqué, il parcourt tous les onglets et supprime les éléments autres que celui en cours. Les onglets cliqués sont tous réinitialisés. à l'état caché, et puis ceci

    est ci-dessous : 

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

    consiste à afficher l'onglet correspondant à l'élément actuellement cliqué.

    De cette façon, seul l'onglet correspondant à l'élément actuellement cliqué sera affiché et le reste des onglets sera masqué.
    Sans cela, lorsque vous cliquerez sur le premier label, le premier label s'affichera.
    Puis vous avez cliqué sur le deuxième onglet, le deuxième onglet a été affiché, et maintenant les premier et deuxième onglets sont affichés en même temps ;

    Puis vous avez cliqué sur le troisième onglet, les deux premiers n'étaient pas masqués et les trois onglets sont affichés. ..

    De cette façon, au final, lorsque vous cliquez sur tous les boutons d'onglets, tous les onglets sont affichés. Ce n'est évidemment pas l'effet des onglets. for

    Afin de masquer tous les onglets à l'exception de l'onglet actuellement cliqué, avant d'afficher l'onglet actuel, utilisez 🎜 pour parcourir et masquer tous les onglets. 🎜

    répondre
    0
  • 怪我咯

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

    La fonction générale est de passer à l'onglet en cliquant dessus.
    Le soi-disant changement signifie autre caché et actuellement affiché.
    Et la partie que vous avez mentionnée consiste à masquer toutes les entrées.
    C'est-à-dire que chaque fois que vous cliquez sur Oui, toutes les entrées sont parcourues une fois, supprimez les attributs de classe et d'affichage et masquez-les.
    Ensuite, ajoutez simplement ceci, c'est-à-dire l'élément actuellement cliqué avec les attributs de classe et d'affichage, et affichez-les.

    répondre
    0
  • 过去多啦不再A梦

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

    Je commente le code, et vous le saurez en voyant les commentaires ! Le principe du code est d'abord d'effacer les noms de classe de toutes les entrées et de masquer tous les p, puis d'ajouter le nom de la classe à l'entrée actuellement cliquée et d'afficher le p correspondant à l'index actuel !

        <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>

    répondre
    0
  • Annulerrépondre