本文代码实现《Javascript进阶篇》最后一章的编程挑战“选项卡切换”内容。 这节内容对于初学者来说算是比较有挑战性的了，我摸索了四个小时了，自我觉得有些印象了，基本上能自己独立实现代码内容。深有感触的是，对于这种复杂的效果要想掌握地好，先临摹，后自己写，不会再看，看了再写，反反复复，直到熟悉掌握为止，而且隔一两天就要重新再独立写出来，以加深印象。 相关素材及代码和代码注释见下文。
效果图：
文字素材:
房产：
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
家居:
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
二手房：
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
语义化代码模板：
- 房产
- 家居
- 二手房
- 275万购昌平邻铁三居 总价20万买一居
- 200万内购五环三居 140万安家东三环
- 北京首现零首付楼盘 53万购东5环50平
- 京楼盘直降5000 中信府 公园楼王现房
- 40平出租屋大改造 美少女的混搭小窝
- 经典清新简欧爱家 90平老房焕发新生
- 新中式的酷色温情 66平撞色活泼家居
- 瓷砖就像选好老婆 卫生间烟道的设计
- 通州豪华3居260万 二环稀缺2居250w甩
- 西3环通透2居290万 130万2居限量抢购
- 黄城根小学学区仅260万 121平70万抛!
- 独家别墅280万 苏州桥2居优惠价248万
完整实现代码：
实践题 - 选项卡
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
font-family: 微软雅黑;
}
a{
text-decoration: none;
color: #000;
}
li{
list-style: none;
line-height: 30px;
height: 30px;
}
#tab{
width: 270px;
margin: 20px;
}
#ul1{
border-bottom: 2px solid red;
line-height: 30px;
height: 32px;
}
#ul1 li{
display: inline-block;
height: 30px;
width: 60px;
text-align: center;
margin-left: 8px;
border:1px solid #ccc;
border-bottom: none;
}
#ul1 li:hover{
cursor: pointer;
}
#ul1 li.active{
border-top: 2px solid red;
border-bottom: 2px solid #fff;
}
#tab div{
border:2px solid red;
border-top: none;
text-indent: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}