table切换/可以在ajax中执行的

原创 2016年08月31日 10:55:07
<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" onclick="change()">广告栏位</li>
        <li onclick="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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

ubuntu/linux 双显卡切换

我的是Acer4750G,GT540的显卡,win7当然没问题,问题是到了ubuntu下后,被这个显卡整死了,N次的黑屏,重装…… 不多废话了,介绍一款软件,针对NVIDIA的Optimus技术的 ...

js效果之table切换

Document *{ padding: 0; margin: 0; list-style: none; } #box{ width: 600px; ...

table切换js

  • 2015年04月18日 15:37
  • 7KB
  • 下载

table切换例子

  • 2015年11月16日 15:25
  • 27KB
  • 下载

关于网页设计中购物车hover与table切换实现方法的一点点说明

在刚接触网页设计时,这两个问题往往是一大难点。下面笔者就先从hover效果的实现开讲。先打出网页内容 购物车 您的购物车没有商品,请尽快选购!!! ...

jquery table(切换标签)

  • 2013年01月30日 13:12
  • 2KB
  • 下载

jquery简单的table切换,在页面可以多次使用。

我曾梦想有一位自己喜欢的女孩可以和我一起生活,
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:table切换/可以在ajax中执行的
举报原因:
原因补充:

(最多只允许输入30个字)