Comment implémenter l'onglet js

L'exemple de cet article décrit la méthode d'implémentation de l'onglet js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Idées

1. Obtenez l'élément

2. Ajoutez l'événement onclick (clic) ou onmousemove (emménagement) ; élément de bouton de boucle for ;

3. Lorsque vous cliquez sur le bouton actuel, il sera affiché dans un état en surbrillance. Grâce à la boucle for, définissez le style de tous les boutons sur vide et définissez l'affichage de tous les div. aucun.

4. Cliquez sur le bouton actuel pour ajouter un style, afficher le div actuel et définir l'affichage sur bloquer.

2. Code HTML :

<div id="div1">
    <input type="button" class="active" value="1"/>
    <input type="button" value="2"/>
    <input type="button" value="3"/> 
    <input type="button" value="4"/>
      <div class="div2" style="display:block;">11</div>
      <div class="div2">22</div>
      <div class="div2">33</div>
      <div class="div2">44</div>
</div>

3. Partie CSS :

.active
{
background:#9CC;
}
.div2
{
width:300px;
height:200px;
border:1px #666666 solid;
display:none;
}

4. ：

<script>
window.onload=function(){
   var odiv=document.getElementById(&#39;div1&#39;);//获取div
   var btn=odiv.getElementsByTagName(&#39;input&#39;);//获取div下的input
   var div2=odiv.getElementsByTagName(&#39;div&#39;) ;//获取div下的div
 
  for(i=0;i<btn.length;i++)//循环每个按钮
   {
     btn[i].index=i
//btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i
     btn[i].onclick=function()//按钮的第i个点击事件
    {
    for(i=0;i<btn.length;i++)//循环去掉button的样式，把div隐藏
     {
       btn[i].className=&#39;&#39; //清空按钮的样式
       div2[i].style.display=&#39;none&#39;//隐藏div
      }
        this.className=&#39;active&#39;//自身添加active
        div2[this.index].style.display=&#39;block&#39;//this.index是当前div
    }
   }
}
</script>

J'espère que cet article sera utile à la conception de la programmation javascript de chacun.

Pour plus d'articles sur la façon d'implémenter les onglets js, veuillez faire attention au site Web PHP chinois !