<!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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Lapisan luar untuk adalah terutamanya untuk mengikat
onclickperistiwa pada setiap butang tab.Untuk dalam adalah dalam acara terikat
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 inionclick事件之内，它的作用是，当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个
forFungsinya ialah,di bawah:
adalah untuk memaparkan tab yang sepadan dengan item yang sedang diklik.
Kemudian anda mengklik tab ketiga, dua yang pertama tidak disembunyikan, dan Tiga tab dipaparkan. ..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
Dengan cara ini, pada akhirnya, apabila anda mengklik semua butang tab, semua tab dipaparkan Ini jelas bukan kesan tab.
Untuk menyembunyikan semua tab kecuali tab yang sedang diklik, sebelum memaparkan tab semasa, gunakan 🎜 untuk melintasi dan menyembunyikan semua tab. 🎜forFungsi 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.
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!