选项卡教程（源代码）
做网页无论实现的功能大或者小，都要先思考和分析一下思路，然后接着动手实现。
下面我来讲讲实现选项卡的思路，学会了就可以用到很多网页里哦~~~
一、HTML页面布局:
1、选项卡一般选用无序列表：ul..li。
2、选项卡的内容用div，这样在写css样式和js的时候可以很方便的把一块内容作为一个容器去控制。
二、CSS样式制作:
1、选项卡的样式设置。
2、选项卡标题样式的设置。
3、选项卡内容样式的设置。
4、功能：开始的时候显示一个选项卡的内容，其他隐藏，鼠标划过才显示该选项卡下的内容。
如图：
三、JS实现选项卡切换
1、先获取选项卡的标题和内容。
2、选项卡有多个内容，需要用for循环来遍历，得出哪一个选项卡和哪一个内容匹配。
3、通过改变DOM的CSS类的名称（className）来切换，当前点击的选项卡显示，其他的隐藏。
四、现在开始实现功能：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{
margin:0;
padding:0;
font:1em normal "microsoft yahei";
}
#tab{
width:300px;
height:150px;
padding:5px;
margin:20px;
}
ul{
height:30px;//要实现的功能里鼠标经过选项卡时，底部边框变成白色，上边框变成#saddlebrown,此时给ul一个高度
list-style:none;
display:block;
line-height:30px;
border-bottom:2px saddlebrown solid;
}
li{
width:60px;
height:28px;//接着li的高度=ul的高度-ul下边框的高度。
line-height:28px;//line-height的作用是让文字垂直居中。
background:#fff;//给li的背景设成白色，也就是给下边框的缺口埋下伏笔。
text-align:center;
float:left;
list-style:none;
margin:0 3px;
width:60px;
text-align:center;
cursor:pointer;
border:1px solid #aaa;//这两句一定要放在后面，要不然显示不出来，具体原因我暂时还没有弄清楚。
border-bottom:none;
}
.house{
border-top:2px solid saddlebrown;//初始化设置第一个选项卡为当前，设置上边框。
border-bottom:2px solid #fff;//设置下边框为none,此时就会出现下边框的缺口。
}
#tab div{
height:120px;
line-height:25px;
border:1px solid #336699;
border-top:none;
padding:5px 20px 5px 5px;
}
.hide{
display:none;//初始后面的选项卡内容为隐藏。
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload=function(){
var tabs=document.getElementById("tab");//获取整一个div的id。
tul=tabs.getElementsByTagName("ul")[0];//获取ul。
var tli = tul.getElementsByTagName("li");//获取li。
var divs = tabs.getElementsByTagName("div"); //获取选项卡内容的div。
for(var i = 0;i<tli.length;i++){
tli[i].index = i;//index为li数组的下标
tli[i].onmouseover = function(){//鼠标经过事件
for(var i = 0;i<tli.length;i++){
tli[i].className = "";//当li的类名为空时，将选项卡的内容div的类名设为hide
divs[i].className = "hide"
}
this.className = "house";//同时当前的选项卡和内容样式设为初始时的样式
divs[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
<ul>
<li class="house">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div class="show">
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>
该来的总会来，只要踏踏实实地做好现在的事情就可以了~~~
