原生js选项卡

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0;padding:0;font-size:12px;}
#tabs{width:220px;padding:5px;height:150px;margin:20px;}
#tabs ul{list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px solid saddlebrown;}
#tabs ul li{list-style:none;float:left;cursor:pointer;height:28px;line-height:28px;width:60px;text-align:center;margin:0 3px;border:1px solid #aaa;}
#tabs div{height:120px;line-height:25px;border:1px solid #ccc;border-top:none;padding:5px;}
.hide{display:none;}
#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:2px solid #fff;}
</style>
</head>
<body>

<div id="tabs">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居总价20万买一居<br/>
200万内购五环三居 140万安家东三环<br/>
北京首现零首付楼盘 53万购东5环50平<br/>
京楼盘直降5000 中信府公园楼王现房 <br/>
</div>
<div class="hide">
40平出租屋大改造美少女的混搭小窝<br/>
经典清新简欧爱家 90平老房焕发新生<br/>
新中式的酷色温情 66平撞色活泼家居<br/>
瓷砖就像选好老婆卫生间烟道的设计<br/>
</div>
<div class="hide">
通州豪华3居260万二环稀缺2居250w甩<br/>
西3环通透2居290万 130万2居限量抢购<br/>
黄城根小学学区仅260万 121平70万抛!<br/>
独家别墅280万苏州桥2居优惠价248万<br/>
</div>
</div>
<script type="text/javascript">
// JS实现选项卡切换
window.onload= function(){
var oTab = document.getElementById('tabs');
var oUl = oTab.getElementsByTagName('ul')[0];
var oLis = oUl.getElementsByTagName('li');
var oDivs = oTab.getElementsByTagName('div');
for(var i=0,len=oLis.length;i<len;i++){ //遍历出oLis
oLis[i].index = i; //给oLis里面的每一个成员加一个属性
//位置1 alert(oLis[i].index); //输出结果 0 1 2
oLis[i].onmouseover = function(){ //当鼠标滑过时
for(var n=0;n<len;n++){ //再遍历下，目的是为了初始化
oLis[n].className = ""; //清除oLis的所有的的classname
oDivs[n].className = "hide"; //设置所有的滑动门的内容的classname=hide，应该是隐藏所有的内容
}
//位置2 alert(oLis[i].index); //你鼠标不over自然不显示
this.className = "on"; //设置当前鼠标滑过的classname=“on”
oDivs[this.index].className = ""; //注意这个this.index，如果写成i的话是不对的，你可以自己试一下，意思是相对应鼠标滑过的导航的内容清除calss设置为显示
}
}
}

</script>
</body>
</html>

相关文章