cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Saya tidak begitu memahami maksud traversal tertentu dalam contoh tab 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>

Ini ialah contoh tab di Internet, tetapi saya tidak begitu memahami bahagian js contoh dan maksud gelung kedua untuk. . . QAQ

仅有的幸福仅有的幸福2706 hari yang lalu799

membalas semua(3)saya akan balas

  • 大家讲道理

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

    Lapisan luar untuk adalah terutamanya untuk mengikat onclick peristiwa pada setiap butang tab.

    Untuk dalam adalah dalam acara terikat onclick事件之内，它的作用是，
    当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个for Fungsinya ialah,

    Apabila tab terikat diklik, ia merentasi semua tab dan mengalih keluar item selain daripada tab yang diklik semuanya ditetapkan semula ke keadaan tersembunyi, dan kemudian ini

    di bawah: 

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

    adalah untuk memaparkan tab yang sepadan dengan item yang sedang diklik.

    Dengan cara ini, hanya tab yang sepadan dengan item yang sedang diklik akan dipaparkan, dan tab yang lain akan disembunyikan.
    Tanpa ini, apabila anda mengklik pada label pertama, label pertama akan dipaparkan.
    Kemudian anda mengklik tab kedua, tab kedua dipaparkan, dan kini tab pertama dan kedua dipaparkan pada masa yang sama

    Kemudian anda mengklik tab ketiga, dua yang pertama tidak disembunyikan, dan Tiga tab dipaparkan. ..

    Dengan cara ini, pada akhirnya, apabila anda mengklik semua butang tab, semua tab dipaparkan Ini jelas bukan kesan tab. for

    Untuk menyembunyikan semua tab kecuali tab yang sedang diklik, sebelum memaparkan tab semasa, gunakan 🎜 untuk melintasi dan menyembunyikan semua tab. 🎜

    balas
    0
  • 怪我咯

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

    Fungsi umum adalah untuk beralih ke tab dengan mengklik padanya.
    Pertukaran yang dipanggil bermaksud lain yang tersembunyi dan sedang dipaparkan.
    Dan bahagian yang anda nyatakan adalah untuk menyembunyikan semua input.
    Iaitu, setiap kali anda mengklik Ya, semua input dilalui sekali, alih keluar atribut kelas dan paparan, dan sembunyikannya
    Kemudian hanya tambahkan ini, iaitu item yang diklik semasa dengan atribut kelas dan paparan, dan paparkannya.

    balas
    0
  • 过去多啦不再A梦

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

    Saya mengulas kod itu, dan anda akan mengetahuinya apabila anda melihat komen itu! Prinsip kod adalah untuk mengosongkan nama kelas semua input dahulu dan menyembunyikan semua p, kemudian menambah nama kelas pada input yang sedang diklik dan memaparkan p yang sepadan dengan indeks semasa!

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

    balas
    0
  • Batalbalas