javascript的选项卡

主要用的索引值

首先 写三个按钮

<input type="button" >
<input type="button" >
<input type="button" >

设置input按钮的样式

input{ border:0; padding:3px 5px; background:blue; color:#fff; margin-left:5px;}

下面写切换的内容的html代码和css样式

<div id="div1">
  <div style="display:block">第一个切换</div>
  <div>第二个切换</div>
  <div>第三个切换</div>
</div>

#div1 div{width:300px; height:200px; border:3px solid #000;display:none; padding:10px;}
.active{ background-color:red;}

 

开始写js代码

1  windows.onload = function(){
    var oDiv = document.getElementById('div1')
2   var aInput = oDiv.getElementsByTagName('input');
3   var aDiv   = oDiv.getElementsByTagName('div');
4   for(var i=0; i< aInput.length ; i++){
        aInput[i].index = i;
        aInput[i].oncilck = function(){
        for( var i=0; i<aInput.length; i++){
         this.className = ''; 
         aDiv[this.index].style.display = 'none';
          }
      this.className = 'active'; 
      aDiv[this.index].style.display = 'block';
         }
      } 
   }

 

转载于:https://www.cnblogs.com/2520IT/p/5461442.html