<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 type="radio"><span>1个/2个月</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>
table切换/可以在ajax中执行的
最新推荐文章于 2023-11-26 22:22:38 发布