选项卡切换

效果图:

 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>实践题 - 选项卡</title>
  6     <style type="text/css">
  7      /* CSS样式制作 */ 
  8         *{
  9             margin:0;
 10             padding:0;
 11             font:14px normal "华文行楷";
 12         }
 13         #tabs{
 14             width:290px;
 15             padding:5px;
 16             height:150px;
 17             margin:20px;
 18         }
 19         ul{
 20           display:flex;
 21           height:30px;
 22           line-height:30px;
 23           border-bottom:2px saddlebrown solid;
 24         }
 25         li{
 26             background:#fff;
 27             cursor:pointer;
 28             list-style:none;
 29             margin: 0px 3px;
 30             border:1px solid #aaa;
 31             height:28px;
 32             line-height:28px;
 33             width:60px;
 34             text-align:center;
 35             border-bottom:none;
 36             display:inline-block;
 37         }
 38         .o{
 39             border-top:2px solid saddlebrown;
 40             border-bottom:2px solid #fff;
 41         }
 42         #tabs div{
 43             height:120px;
 44             line-height:25px;
 45             border:1px solid #369;
 46             border-top:none;
 47             padding:5px;
 48         }
 49         .hide{
 50             display:none;
 51         }
 52        
 53     </style>
 54     <script type="text/javascript">
 55          
 56     // JS实现选项卡切换
 57     window.onload = function(){
 58         var oTab = document.getElementById("tabs");
 59         var oUl = oTab.getElementsByTagName("ul")[0];
 60         var oLis = oUl.getElementsByTagName("li");
 61         var oDivs = oTab.getElementsByTagName("div");
 62         
 63         for(var i=0,len=oLis.length; i<len; i++){
 64             oLis[i].index = i;
 65             oLis[i].onclick = function(){
 66                 for(var n=0; n<len; n++){
 67                     oLis[n].className = "";
 68                     oDivs[n].className = "hide";
 69                 }
 70                 this.className = "o";
 71                 oDivs[this.index].className = "";
 72             }
 73         };
 74     }
 75     </script>
 76  
 77 </head>
 78 <body>
 79 <!-- HTML页面布局 -->
 80 <div id="tabs">
 81     <ul>
 82         <li class="o">房产</li>
 83         <li>家居</li>
 84         <li>二手房</li>
 85     </ul>
 86         <div>
 87             275万购昌平邻铁三居 总价20万买一居<br />
 88             200万内购五环三居 140万安家东三环<br />
 89             北京首现零首付楼盘 53万购东5环50平<br />
 90             京楼盘直降5000 中信府 公园楼王现房<br />
 91         </div>
 92         <div class="hide">
 93             40平出租屋大改造 美少女的混搭小窝<br />
 94             经典清新简欧爱家 90平老房焕发新生<br />
 95             新中式的酷色温情 66平撞色活泼家居<br />
 96             瓷砖就像选好老婆 卫生间烟道的设计<br />
 97         </div>
 98         <div class="hide">
 99             通州豪华3居260万 二环稀缺2居250w甩<br />
100             西3环通透2居290万 130万2居限量抢购<br />
101             黄城根小学学区仅260万 121平70万抛!<br />
102             独家别墅280万 苏州桥2居优惠价248万<br />
103         </div>
104 </div>
105 </body>
106 </html>

 

posted @ 2015-07-14 12:46  嘆世殘者——華帥  阅读(253)  评论(0)  编辑  收藏  举报