- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>实践题 - 选项卡</title>
- <style type="text/CSS">
- *{
- margin:0px;
- padding:0px;
- }
- #tab{
- margin:10px;
- }
- #tab ul{
- list-style:none;
- height:36px;
- border-bottom:2px solid black ;
- display:block;
- }
- #tab ul li{
- float:left;
- display:inline-block;
- padding:0px 15px;
- height:34px;
- line-height:34px;
- margin-right:5px;
- border:1px solid #ccc;
- border-bottom:none;
- cursor:pointer;
- }
- #tab div{
- padding:5px;
- border:1px solid #ccc;
- border-top:none;
- }
- #tab ul li.on{
- border-top:2px solid black;
- border-bottom: 2px solid white;
- }
- .hide{
- display:none;
- }
- </style>
- <script type="text/javascript">
- window.onload=function(){
- var mytab =document.getElementById("tab");
- var myul=mytab.getElementsByTagName("ul")[0];
- var myli=myul.getElementsByTagName("li");
- var mydiv=mytab.getElementsByTagName("div");
- // alert(mydiv.length)
- 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>
- </head>
- <body>
- <!-- HTML页面布局 -->
- <div id="tab">
- <ul>
- <li class="on">房产</li>
- <li>家居</li>
- <li>二手房</li>
- </ul>
- <div>
- 275万购昌平邻铁三居 总价20万买一居
- 200万内购五环三居 140万安家东三环
- 北京首现零首付楼盘 53万购东5环50平
- 京楼盘直降5000 中信府 公园楼王现房
- </div>
- <div class="hide">
- 40平出租屋大改造 美少女的混搭小窝
- 经典清新简欧爱家 90平老房焕发新生
- 新中式的酷色温情 66平撞色活泼家居
- 瓷砖就像选好老婆 卫生间烟道的设计
- </div>
- <div class="hide">
- 通州豪华3居260万 二环稀缺2居250w甩
- 西3环通透2居290万 130万2居限量抢购
- 黄城根小学学区仅260万 121平70万抛!
- 独家别墅280万 苏州桥2居优惠价248万
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0607201614786.html
来源: http://www.codesnippet.cn/detail/0607201614786.html