Implementierungsmethode der Registerkarte js-js-Tutorial-php.cn

Implementierungsmethode der Registerkarte js

高洛峰

Freigeben： 2017-02-04 14:34:33

Original

1002 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode von js tab. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Holen Sie sich das Element

2 for-Schleifen-Schaltflächenelement;

3. Wenn auf die aktuelle Schaltfläche geklickt wird, wird sie in einem hervorgehobenen Zustand angezeigt. Stellen Sie den Stil aller Schaltflächen auf „leer“ und die Anzeige aller Divs ein keiner.

4. Klicken Sie auf die aktuelle Schaltfläche, um einen Stil hinzuzufügen, das aktuelle Div anzuzeigen und die Anzeige auf Block zu setzen.

2. HTML-Code:

3. CSS-Teil:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das Javascript-Programmierdesign aller hilfreich sein wird.

Weitere Artikel zur Implementierung von JS-Tabs finden Sie auf der chinesischen PHP-Website!