<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
.big{
position:relative;
width:300px;
height:300px;
}
.main li{
list-style:none;
display:inline-block;
border-style:solid;
border-bottom-color:#FFF;
width:50px;
line-height:30px;
}
.down{
position:absolute;
top:32px;
left:0;
width:300px;
height:200px;
overflow:hidden;
border-style:solid;
display:none;
}
.main:hover li{
cursor:pointer;
}
.active{
display:block;
}
</style>
</head>
<body>
<!-- HTML页面布局 -->
<div id="big1">
<div id="main1">
<ul>
<li><a href="javascript:switch1" id="fangchan">房产</a></li>
<li><a href="javascript:switch1" id="jiaju">家居</a></li>
<li><a href="javascript:switch1" id="ershoufang">二手房</a></li>
</ul>
</div>
<div class="down active ">
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
</div>
<div>
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div>
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
</div>
</div>
</body>
<script type="text/javascript">
function switch1(){
var main_i = document.getElementById("main1");
var main_s = document.getElementsByTagName("li");
var big_ka = document.getElementsByClassName("down");
for(var i=0;i<=main_s.length;i++){
main_s[i].onmouseover=function(){
for(var k=0;k<=big_ka.length;k++){
big_ka[k].className=big_ka[k].className.replace("active","");
}
big_ka[i].className+=" active";
}
}
}
// JS实现选项卡切换
window.onload=function(){
switch1();
}
</script>
</html>
循环时超过索引了， 一共三个元素，索引为 0 ，1 ，2
i<=main_s.length =》 i<main_s.length
k<=big_ka.length = 》 k<big_ka.length