![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 .tab-div { 9 width: 400px; 10 position: relative; /*作为选项卡内容的定位*/ 11 } 12 ul { 13 list-style: none; 14 } 15 .tab { 16 width: 400px; 17 overflow: hidden; 18 margin: 0; 19 padding: 0; 20 21 position: relative; 22 z-index: 2; 23 } 24 .tab li{ 25 float: left; 26 width: 80px; 27 height: 30px; 28 line-height: 30px; 29 text-align: center; 30 border: 1px solid #DDD; 31 border-bottom: 0; 32 margin-left: 10px; 33 background: #fff; 34 cursor: pointer; 35 } 36 .tab-content { 37 width: 350px; 38 /*position: absolute;*/ 39 border: 1px solid #DDD; 40 border-top: 3px solid #e4393c; 41 42 text-align: center; 43 44 position: absolute; 45 top: 31px; 46 left: 0; 47 } 48 .tab-content ul { 49 margin: 0; 50 padding: 10px; 51 } 52 .tab-content li { 53 padding: 10px; 54 } 55 .tab-content li a { 56 color: #000; 57 text-decoration: none; 58 } 59 .tab-content li a:hover { 60 color: #e4393c; 61 text-decoration: underline; 62 } 63 .tab .tab-active { 64 border-top: 3px solid #e4393c; 65 border-bottom: 3px solid #fff; 66 } 67 .tab-content-show { 68 display: block; 69 } 70 .tab-content-hide { 71 display: none; 72 } 73 </style> 74 <script type="text/javascript"> 75 // JS实现选项卡切换 76 window.onload = function() { 77 var tabList = document.getElementById("tab-list"); 78 var aLis = tabList.getElementsByTagName("li"); 79 var tDiv = document.getElementById("tDiv"); 80 var contents = tDiv.getElementsByTagName("div"); 81 82 for(var i = 0; i < aLis.length; i++) { 83 aLis[i].index = i; 84 aLis[i].onclick = function() { 85 for(var j = 0; j < aLis.length; j++) { 86 aLis[j].className = ''; 87 } 88 this.className = "tab-active"; 89 90 for(var j = 0; j < contents.length; j++) { 91 contents[j].className = "tab-content tab-content-hide"; 92 } 93 contents[this.index].className = "tab-content tab-content-show"; 94 }; 95 } 96 }; 97 98 </script> 99 100 </head> 101 <body> 102 <!-- HTML页面布局 --> 103 <div id="tDiv" class="tab-div"> 104 <ul id="tab-list" class="tab"> 105 <li class="tab-active">房产</li> 106 <li>家居</li> 107 <li>二手房</li> 108 </ul> 109 <div class="tab-content tab-content-show"> 110 <ul> 111 <li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li> 112 <li><a href="#">200万内购五环三居 140万安家东三环</a></li> 113 <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li> 114 <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li> 115 </ul> 116 </div> 117 <div class="tab-content tab-content-hide"> 118 <ul> 119 <li><a href="#">40平出租屋大改造 美少女的混搭小窝</a></li> 120 <li><a href="#">经典清新简欧爱家 90平老房焕发新生</a></li> 121 <li><a href="#">新中式的酷色温情 66平撞色活泼家居</a></li> 122 <li><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></li> 123 </ul> 124 </div> 125 <div class="tab-content tab-content-hide"> 126 <ul> 127 <li><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></li> 128 <li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li> 129 <li><a href="#">黄城根小学学区仅260万 121平70万抛!</a></li> 130 <li><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></li> 131 </ul> 132 </div> 133 </div> 134 </body> 135 </html>