大佬们看看我这问题在哪
最后执行的好怪呀
qq_慕慕3085076
2019-06-05
1 回答
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0;padding:0;}
ul{list-style: none;}
.box{position: relative;}
.box li{
position:absolute;
top:-33px;
border:1px solid #ccc;
float: left;
padding:5px 20px 5px 20px;
margin:1px 3px 0;
background-color:white;
border-bottom:2px solid brown;
z-index: -1;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.box li:hover{
cursor:pointer
}
.box .tit1{left:0;}
.box .tit2{left:80px;}
.box .tit3{left:160px;}
.context{
width:330px;
clear:both;
padding:5px 0 40px 5px;
border:1px solid blue;
border-top:2px solid brown;
margin-top:33px;
}
.context ul{
display: none;
}
.context ul li{
font-size: 14px;
line-height: 25px;
}
#activated{
display: block;
}
#act{
height:22px;
border-top:2px solid brown;
border-bottom:none;
z-index: 2;
}
</style>
<script type="text/javascript">
var page = 1,
box = null,
context = null;
// JS实现选项卡切换
window.onload = function(){
box = document.getElementsByClassName("box")[0]
context = document.getElementsByClassName("context")[0]
}
function change(i){
context.childNodes[page].setAttribute('id',' ');
context.childNodes[i].setAttribute('id','activated');
box.childNodes[page].setAttribute('id',' ');
box.childNodes[i].setAttribute('id','act');
page = i
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<ul class="box">
<li class="tit1" id="act" onclick="change(1)">房产</li>
<li class="tit2" onclick="change(3)">家居</li>
<li class="tit3" onclick="change(5)">二手房</li>
</ul>
<div class="context">
<ul id="activated">
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
<ul >
<li>40平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li>新中式的酷色温情 66平撞色活泼家居</li>
<li>瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
<ul >
<li>通州豪华3居260万 二环稀缺2居250w甩</li>
<li>西3环通透2居290万 130万2居限量抢购</li>
<li>黄城根小学学区仅260万 121平70万抛!</li>
<li>独家别墅280万 苏州桥2居优惠价248万</li>
</ul>
</div>
</body>
</html>
我是这么写的…感觉我写的好多没用的…
举报
0/150
提交
取消
