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>
