Table switching / can be executed in ajax

<style type="text/css">
    .ui_content{
  
  margin:10px!important; text-align: left!important;}
    *{
  
  margin:0px;  padding:0px;  }
    #tab{  margin:10px;  }
    #tab ul{  list-style:none;  height:36px;  border-bottom:2px solid #ff4a00;display:block;  }
    #tab ul li{  float:left;  display:inline-block;  padding:0px 15px;  height:34px;  line-height:34px;  margin-right:5px;   cursor:pointer;  }
    #tab div{  width:450px;  padding:5px;}
    #tab ul li.on{  border-bottom: 2px solid #ff4a00;    background-color: #ff4a00;  color: #ffffff;  }
    #tab dl dt span{
  
  padding-left: 10px;}
    .hide{  display:none;  }
  </style>
<div id="tab">
    <ul>
        <li class="on" οnclick="change()">广告栏位</li>
        <li οnclick="change()">发布次数</li>
    </ul>
    <div>
       <dl>
           <dt><input type="radio"><span>1个/1个月</span></dt>
           <dt><input 1/2 months><span>"radio"type=</span></dt>
           <dt><input type="radio"><span>1个/3个月</span></dt>
       </dl>
    </div>
    <div class="hide">
        <dl>
            <dt><input type="radio"><span>1次</span></dt>
            <dt><input type="radio"><span>2次</span></dt>
            <dt><input type="radio"><span>3次</span></dt>
        </dl>
    </div>
</div>


<script type="text/javascript">
function change(){
     var mytab =document.getElementById("tab");
     var myul=mytab.getElementsByTagName("ul")[0];
     var myli=myul.getElementsByTagName("li");
     var mydiv=mytab.getElementsByTagName("div");
   
     for(i=0,len=myli.length;i<len;i++){
       myli[i].index=i;
       myli[i].onclick=function(){
         for(var n=0;n<len;n++){
           myli[n].className="";
           mydiv[n].className="hide";
         }
         this.className="on";         
         mydiv[this.index].className="";
          
       }
     }
    }
    
  </script>