javascript的DOM学习之选项卡制作

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <style>
       h3{
         100px;
        height: 25px;
        line-height: 25px;
        float: left;
        background: #333;
        color: #fff;
        margin: 0px;
        padding: 0px;
        border: 5px solid #fff;
       }
       .selecth3{
        background: #fff;
        color: #000;
    }
       
       #select:after{
          content: "";
          display: block;
           0px;
          height: 0px;
          clear: both;
       }
       #content{
        padding-top: 20px;
         400px;
        height: 300px;
        background: #333;
        color: #fff;
       }
       #content div{
        display: none;
       }
       #content div:first-child{
        display: block;

       }

    </style>

    <body>
         <div id="select">
             <h3 onmouseover="show(0)" class="selecth3">选项一</h3>
              <h3 onmouseover="show(1)">选项二</h3>
               <h3 onmouseover="show(2)">选项三</h3>
         </div>
   <div id="content">
         <div>
            选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一
         </div>
          <div>
            选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二
         </div>
           <div>
            选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三
         </div>
   </div>
   <script>
         var ah3=document.getElementsByTagName('h3');

         var contentget=document.getElementById('content').getElementsByTagName('div');
      
         function show(num){

            for(var i=0;i<ah3.length;i++)
            {
                  if(i==num){
                       ah3[num].className="selecth3";
                       contentget[num].style.display="block";
                  }
                  else{
                    ah3[i].className=" ";
                    contentget[i].style.display="none";
                  }
            }

           
}


         
   </script>

    </body>
</html>
演示：demo
主要是操作dom数组来操作相应的dom
if you don't try,you will never know!