Simple implementation of js tab switching effect_javascript skills-JS Tutorial-php.cn

Simple implementation of js tab switching effect_javascript skills

WBOY

Release： 2016-05-16 15:16:27

Original

1853 people have browsed it

The example in this article introduces the detailed code to achieve the js tab switching effect, and shares it with everyone for your reference. The specific content is as follows

Things:

1. Get elements;
2. Add onclick (click) or onmousemove (move in) event to the for loop button element;
3. When the current button is clicked, it will be displayed in a highlighted state. Set all button styles to empty through a for loop and set the display of all divs to none.
4. Click the current button to add a style, display the current div, and set the display to block.

html code:

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

Copy after login

css style:

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

Copy after login

js code:

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

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone’s study.