Home > Web Front-end > JS Tutorial > body text

How to implement js tab

高洛峰
Release: 2017-02-04 14:34:33
Original
979 people have browsed it

The example of this article describes the implementation method of js tab. Share it with everyone for your reference. The specific analysis is as follows:

1. Ideas

1. Get the element;

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. Through the for loop, set the style of all buttons to empty and set the display of all divs to none.

4. Click the current button to add a style, display the current div, and set display to block.

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

3. CSS part:

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

4. JS code:

<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>
Copy after login

I hope this article will be helpful to everyone’s javascript programming.

For more articles related to the implementation method of js tab, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template