您的位置：首页 > Web前端 > JavaScript

js选项卡切换实战

2016-01-26 21:22 603 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin: 0;
padding: 0;}
body{
padding-top: 300px;
}
#xxk{
width: 340px;
margin:0 auto;
}
.title{
width: 60px;
height: 30px;
display:inline-block;
margin-left: 10px;
border:2px solid #dbdbdb;
text-align: center;
line-height: 30px;
border-bottom: none !important;
z-index: 1;
}
.content{
width: 340px;
height: 100px;
padding: 6px;
border: 1px solid #dbdbdb;
z-index: -1;
}
.content li{
list-style: none;
height: 25px;
font-size: 18px;
line-height: 25px;
}
#JG{
position: absolute;
top:100px;
}
#ESF{
position: absolute;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var fcBtn=document.getElementById('fc'),
jgBtn=document.getElementById('jg'),
esfBtn=document.getElementById('esf'),
content=document.getElementById('content'),
colorObj=fcBtn;
colorObj.style.background='#FF8C00';
content.innerHTML="<li>275万购昌平邻铁三居 总价20万买一居</li><li>200万内购五环三居 140万安家东三环</li><li>北京首现零首付楼盘 53万购东5环50平</li><li>京楼盘直降5000 中信府 公园楼王现房</li>"
fcBtn.onmouseover=function(){
content.innerHTML="<li>275万购昌平邻铁三居 总价20万买一居</li><li>200万内购五环三居 140万安家东三环</li><li>北京首现零首付楼盘 53万购东5环50平</li><li>京楼盘直降5000 中信府 公园楼王现房</li>"
colorObj.style.background='#FFFFFF';
this.style.background='#FF8C00';
colorObj=this;

}
jgBtn.onmouseover=function(){
content.innerHTML="<li>40平出租屋大改造 美少女的混搭小窝</li><li>经典清新简欧爱家 90平老房焕发新生</li><li>新中式的酷色温情 66平撞色活泼家居</li><li>瓷砖就像选好老婆 卫生间烟道的设计</li>"
this.style.background='#FF8C00';
colorObj.style.background='#FFFFFF';
this.style.background='#FF8C00';
colorObj=this;
}
esfBtn.onmouseover=function(){
content.innerHTML="<li>通州豪华3居260万 二环稀缺2居250w甩</li><li>西3环通透2居290万 130万2居限量抢购</li><li>黄城根小学学区仅260万 121平70万抛!</li><li>独家别墅280万 苏州桥2居优惠价248万</li>"
this.style.background='#FF8C00';
colorObj.style.background='#FFFFFF';
this.style.background='#FF8C00';
colorObj=this;
}
}
// JS实现选项卡切换

</script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="xxk">
<div id="fc" class="title">房产</div>
<div id="jg" class="title">家居</div>
<div id="esf" class="title">二手房</div>
<ul id="content" class="content">

</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航