Implémentation simple des compétences effect_javascript de changement d'onglet js

L'exemple de cet article présente le code détaillé pour obtenir l'effet de changement d'onglet js et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

Choses :

• 1. Obtenez des éléments
• 2. Ajoutez l'événement onclick (clic) ou onmousemove (emménagement) à l'élément du bouton de boucle for
• 3. Lorsque vous cliquez sur le bouton actuel, il sera affiché dans un état en surbrillance. Définissez tous les styles de bouton pour qu'ils soient vides via une boucle for et définissez l'affichage de tous les div sur aucun.
• 4. Cliquez sur le bouton actuel pour ajouter un style, afficher le div actuel et définir l'affichage sur blocage.
  

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>
 

style CSS :

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

code js :

<script>
window.onload=function(){
 
  var odiv=document.getElementById('div1');//获取div
  var btn=odiv.getElementsByTagName('input');//获取div下的input
  var div2=odiv.getElementsByTagName('div') ;//获取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='' //清空按钮的样式
    div2[i].style.display='none'//隐藏div
   }
    this.className='active'//自身添加active
    div2[this.index].style.display='block'//this.index是当前div
 
 
  }
  }
 
}
</script>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.