<!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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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é
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 cecionclick事件之内，它的作用是，当点击了被绑定的选项卡时，遍历所有的选项卡，把不是当前点击的选项卡都重置成隐藏状态，然后这个
for. Sa fonction est la suivante :est ci-dessous :
consiste à afficher l'onglet correspondant à l'élément actuellement cliqué.
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, 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 ;
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.
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. 🎜forLa 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.
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 !