html程式碼：

   <h2 class="active">選項卡1</h2>                   
   <h2>選項卡2</h2>
   <h2>選項卡3</h2>
   <div style="display:block;background-color:hotpink;">內容1</div>     
   <div style="background-color:darkkhaki;">內容2</div>
   <div style="background-color:gray;">內容3</div>

css程式碼：

  h2{                       //  首先設定h2的寬高  ，將h2初始       化。
     width:90px;
     height:30px;
     border:1px solid firebrick;
     float:left;  
     text-align: center;
     border-bottom: 0;
     cursor: pointer;
   }
div{
     width:275px;
     height:300px;
     border:1px solid gray;
     display: none;
     position:absolute;
     left:7px;
     top:59px;
   }
 .active{                                       
     background:#B22222;
     color:white;
   }
 

js程式碼：

     var oH2 =     document.getElementsByTagName('h2');                     
     var oDiv = document.getElementsByTagName('div');      
      // console.log(oDiv)
     for(var i = 0; i < oH2.length; i++){                         
          oH2[i].index = i;
          oH2[i].onclick = function(){
               for(var i = 0; i < oH2.length; i++){
                  oH2[i].className = 'null';            
                  oDiv[i].style.display = 'none';
               }
               this.className = 'active';
               oDiv[this.index].style.display = 'block';
          }
     }